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

シェアする

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

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

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

chrome-devtools-theme-zero-dark-matrix

こんな感じになります。

Sponsored Links

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

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

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

chrome-flags-developer-tools-experiments

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

chrome-devtools-setting-for-ui-themes

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

テーマを適用する

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

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

chrome-devtools-theme-zero-dark-matrix

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

chrome-devtools-theme-readable

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

chrome-devtools-theme-brogrammer

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

Sponsored Link

シェアする

フォローする