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

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

※リクエストを頂いたので、ダーク系以外のテーマも追加しました。

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

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

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

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

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

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

greybeard devtools （Chromeウェブストア）

ApplePips

Frozen

Solarized Light

SunnyVale

Cherry Blossom

Readable

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

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

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

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

Chromeウェブストアからダウンロードできないテーマの適用方法

1. テーマファイルをダウンロードします。
2. Chromeの拡張機能を表示。
3. 「デベロッパーモード」をチェック。
4. 「パッケージ化されていない拡張機能を読み込む」をクリックし、テーマファイルを読み込みます。
5. テーマファイルを有効化。
6. Chromeを再起動。
7. デベロッパーツールを起動し、設定の「Experiments」タブを選択し、「Allow custom UI themes」をチェック。
8. これでデベロッパー ツールにテーマファイルが適用されます。