Chromeのデベロッパーツールが見やすくなる！デベロッパーツールのUIをダーク系に変更する方法

ブラックの背景の方が作業が捗る！そんな人にオススメのChromeのデベロッパーツールのUIをダーク系にするテーマファイルとその変更方法を紹介します。

テーマを適用するとこんな感じに

• デベロッパーツール用のテーマファイル
• テーマファイルの適用方法

デベロッパーツール用のテーマファイル

数は多くないですが、カラーリングが異なり、お好みのものをChromeウェブストアからご利用ください。

Chrome DevTools Theme: Flatland （Chromeウェブストア）

ZeroDarkMatrix Theme for Chrome （Chromeウェブストア）

greybeard devtools （Chromeウェブストア）

テーマファイルの適用方法

テーマファイルを適用するには、Chromeの試験運用機能を使用します。
※試験運用機能はサポート対象外のため、ご利用の際には十分ご注意ください。

1. テーマファイルをダウンロードします。
2. Chromeのアドレスバーに「chrome://flags/#enable-devtools-experiments」と入力し、試験運用機能にある「デベロッパー ツールのテストを有効にする」を有効化します。
3. Chromeを再起動。
4. デベロッパーツールを起動し、設定の「Experiments」タブを選択し、「Allow custom UI themes」をチェック。
5. これでデベロッパー ツールにテーマファイルが適用されます。

「Experiments」タブの「Allow custom UI themes」をチェック
※テーマ適用済みなので既に背景がブラックです。通常は白地。