こんにちは。皆さんはChromeデベロッパーツール使ってますか？
VSCodeでもvimでも、テキストエディタでは背景画像やテーマが変えられる拡張機能がありますよね。
じゃあ、Chrome devtoolsは…？と興味本位で調べると、英語でも全然やってる人がいない。
ということで、今回は軽くChromeデベロッパーツールの背景画像（background image）を変えてしまうやり方をシェアします。
（蛇足： 先日こういうアプリ作ったよ記事をQiitaに上げていて、このQiitaアカウントではReact.jsとかNext.jsとか、開発に関連する学習記事を上げていく予定でしたが、
Qiitaアカウントの切り替えが面倒なので、このアカウントのまま投稿することにします😿）
早速、Chromeデベロッパーツールの背景画像を変える
ではやっていきましょう。
まず、完成図がこちら。
と言っても特にやることはなく、画像を入れるだけならシンプルです。
ChromeデベロッパーツールはHTML/CSS/JavaScriptで書かれていますので、理屈上、普段やるようにCSSを変えてやればよいです。
任意のウェブページ・URL上でChromeデベロッパーツールを開き（ctrl-shift-Iショートカットキーで開きます）、
さらにもう一度Chromeデベロッパーツールを開きます（同じく、ctrl-shift-Iショートカットキーで開きます）。
これで、ChromeデベロッパーツールのためのChromeデベロッパーツールが開かれます。
こういうふうに、HTML、DOM要素の検証ができます。
今回はChromeデベロッパーツールのJavaScriptを入力するコンソールタブの背景画像を挿入するので、
ChromeデベロッパーツールのHTML上で次の要素を探します。
div[id="console-messages"]
そこに以下のようにCSSを追加します。
画像のURLは任意で差し替えます。
{
background-image: url(https://images.unsplash.com/photo-1588093335104-b539e62d7a72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80);
background-repeat: no-repeat;
background-size: cover;
}
使用画像: white and black cat on brown wooden table photo – Free Image on Unsplash
完了です。
少し見にくいですね。猫さんと可読性のトレードオフ、悩ましい…😿
もちろん画像はお好きなのが使えますので、黒色メインでいい画像であれば見やすくなるかと思います。
恒久的にするにはどうするの？
できるか試しただけなので恒久的に設定するにはどうするかまで考えていませんでした…😿
少し調べましたがあまり情報も多くなく、後日時間が空いたら検証、出来たら当記事も更新したいと思います。
ご存じの方など、コメントなどでご教授いただけると助かります。
以上です。適当に自慢にでも使ってもらえれば幸いです。
終わり。😺
PS. よいやり方の提案・間違い修正etcぜひお伝え下さい。
ありがとうございました。