Visual Studio Code のデバッグコンソールとかに背景画像を設定したい

 

 メリークリスマスを通り越して、気が付けば大晦日も大晦日。みなさん如何お過ごしでしょうか。僕はAqoursの紅白出場が見れたので満足しているところです。

 

 で、ふと、そうおいえば12月はまだブログ更新してなかったことを思い出して、今あわてて書いているところです。別にノルマとか無いんですけども。というわけでタイトルの通りです。

 本題。エディタとかに背景画像を設定するのは、ぐぐればすぐ出てくるので簡単に出来てるんですよ。主に幻想ツバメさんとこの記事を参考にさせてもらいまして。要はCSSいじってあれこれ弄っちゃうってわけですね。これによって、こんな感じにするところまではあっさり出来ました。

image

 

 

 そこまでは良かったんですが、エディタやターミナルは画像設定できてもデバッグコンソールとかのタブが出来なかったんですよね。(ターミナルと共通だと思ってた)

 

image

 

 

 これがググってもどう書けばいいのか出てこなかったので、自分で適当に調べて、設定してみました。のでそれ晒しときます。ただ、ぶっちゃけCSSとか全然詳しくないので、なんか変な書き方してたらゴメンナサイね、適宜修正して使ってください。(もちろん自己責任でお願いします)

 

 ヘルプの開発者ツールから適当に要素を調べた感じ、デバッグコンソールの要素名はpanelみたいなので、「 workbench.main.css 」に以下を書き加えてみました。

.monaco-workbench .part.panel {
    background: url("///C:/MyData/vscode_custom/panel.jpg") no-repeat;
    background-position: right top; 
    background-size: contain;
}

 

 したらばこんな感じで、デバッグコンソールにも画像を設定できました。

image

 

 細かい調整とかは必要ですが、ひとまず画像設定するだけならこれで……。誰かの役に立てば幸いです。

 

 

 それではみなさん、よいお年を。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中