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

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

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

Chromeのデベロッパーツールをカスタマイズ

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

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

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

テーマファイルのキャプチャ

Chrome DevTools Theme: FlatlandChromeウェブストア

テーマファイルのキャプチャ

ZeroDarkMatrix Theme for ChromeChromeウェブストア

テーマファイルのキャプチャ

greybeard devtoolsChromeウェブストア

テーマファイルのキャプチャ

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」タブのキャプチャ

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

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

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

top of page

©2017 coliss