Google Chrome の開発者ツールの見た目を変更する拡張機能

ryomatsu

9年前

Web 系開発者なら皆知っている通り、Google Chrome には標準で開発者ツールが入っており Web サイトを構築する際には必須となっていますね。

この開発者ツール、標準の状態では白いテーマですがエディタや IDE 同様に別のテーマに変更したいという人もいるでしょう。そんな人の為に開発者ツールのテーマを変更する拡張機能が存在します。

例えば黒い画面が好きであれば、DevTools Theme: Zero Dark Matrix なんかが良いでしょう。

こんな感じになります。

開発者ツールのテーマを変更する為の設定

拡張機能をインストールする前に、開発者ツールでテーマを使うためにいくつか設定を変更しましょう。

Google Chrome で chrome://flags へアクセスし、開発者ツールの Developer Tools experiments の欄を有効にし、Chrome を再起動します。

次に開発者ツールの設定を開き Experiments 欄にある Allow custom UI themes を有効にしましょう。

この2つの設定を行ったらテーマを使えるようになります。

上記の設定を行えばあとはテーマをインストールし、有効化すれば開発者ツールがテーマの色に変更されます。

例えば上記の DevTools Theme:Zero Dark Matrix であれば黒っぽい画面になります。

白いのが良いのであれば Readable というテーマがあります。

黒いけどもうちょっとカラフルなのが、というときは Brogrammer というテーマがあります。

他にもテーマはいくつかあるので気に入るものを探してみましょう。