Chrome Developer Tools のUIを変更する

Chromeのデベロッパーツールは、テーマ（UI）を変更することができます。


プログラミングをやっている方ならエディタの使い勝手が作業効率に直結することは実感されていることと思います。
Chromeを使ってWebデザインを行う場合、デベッロッパーツールは必須だと思いますが、このUIも変更することができます。今の所見た目だけの変更ですが、それだけでも作業効率に大きく影響するでしょう。

デベッロッパーツーのUIは「テーマ」として公開されていますので自分の好みのテーマを採用してみてはいかがでしょうか。

****************************************************************

※以前のバージョンのChromeでは以下のCSSファイルを変更することでテーマを変えられたのですが、現在ではこのCSSは無視されるようです。

[Mac]
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

[Windows]
C:/Users/(username)/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css

[Linux]
~/.config/chromium/Default/User StyleSheets/Custom.css

****************************************************************

※現在はChromeの機能拡張でテーマを追加する方法となっています。

①Chromeで「chrome://flags/#enable-devtools-experiments」にアクセスする。
②「デベロッパー ツールのテストを有効にする」を有効にする。
③デベロッパーツールを起動する。
③「Settings」→「Experiments」→「Allow custom UI themes」にチェックを入れる。
④Chromeを再起動する。

ここからテーマがChromeウェブストアに登録されている場合とされていない場合とで手順が変わります。

※Chromeウェブストアに登録されている場合
⑤ChromeでChromeウェブストアにアクセスする。
⑥好みのテーマのページに移動する。
⑦「Chromeに追加」ボタンをクリックし、機能を追加する。

※Chromeウェブストアに登録されていない場合
⑤テーマファイルをダウンロードする。
⑥Chromeで「chrome://extensions/」にアクセスする。
　　（あるいはメニューから「その他のツール」→「拡張機能」）
⑦最上部の「デベロッパーモード」にチェックを入れる。
⑧「パッケージ化されていない拡張機能を読み込む」ボタンをクリックする。
⑨ダウンロードしたテーマファイルを読み込む。

これでデベロッパーツールを起動すればUIが変わっているはずです。変わっていない場合、機能拡張でテーマが有効になっているか確認してください。

****************************************************************

個人的にはChromeよりもFirefoxの方が好きなのですが、好みのテーマが見つかったらメインのブラウザをChromeにしてみても良いと思っています。