ChromeデベロッパーツールでMonokaiテーマ(暗色系テーマ)を利用する方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

Chromeのデベロッパーツールは、テーマを変更して利用することができます。

今回は、そのデベロッパーツールのテーマを暗色系のテーマ「Monokai」に変更する方法を紹介します。

僕が普段使用しているテキストエディタのSublime TextのデフォルトテーマもMonokaiです。Monokaiテーマとは以下のような配色のテーマで、目に優しく見やすいので個人的に気に入っています。

MonokaiテーマのHTML配色

Monokaiとは元々、Wimer Hazenberg氏が作成したTextmate用のColor Styleです。

photo by Clive Darra

スポンサーリンク
レクタングル(大)広告

主な手順

デベロッパーツールをMonokaiテーマにする主な手順は以下です。

  1. ChromeウェブストアからMonokaiテーマのダウンロード
  2. 試験運用機能の「デベロッパーツールのテストを有効にする」を有効にする
  3. デベロッパーツールの設定からテーマを有効にする

主に行うことは、上記の3手順です。5分もかからずに設定できるかと思います。

テーマのダウンロード

まずは、Google ChromeでAntonio Brandao Devtools Monokai Themeに移動してください。

以下のように表示されるので、「Chromeに追加」ボタンを押してください。

MonokaiテーマをChromeに追加

ダイアログが表示されるので、「追加」を押せばダウンロードは完了です。

Monokaiテーマの追加ダイアログ

デベロッパーツールのテストを有効にする

次に、デベロッパーツールで試験的に導入されている機能を利用できるようにします。

まずは、Chromeのアドレスバーに「chrome://flags/#enable-devtools-experiments」と入力してエンターを押してください。

enable-devtools-experiments

すると、「デベロッパーツールのテストを有効にする」という設定項目が、黄色でマークアップされた設定部分が表示されるので、「有効にする」をクリックします。

「デベロッパーツールのテストを有効にする」設定項目

「有効にする」をクリックしたら、Chrome画面下に「今すぐ再起動」というボタンが表示されるので、ボタンを押して再起動をします。

「今すぐ再起動」をクリック

テーマを有効にする

再起動後、F12キーを押すか、右クリックから「要素を検証」を選択してデベロッパーツールを起動します。

右クリックメニューから「要素を検証」を選択

デベロッパーツールが表示されたら、設定アイコンをクリックします。

デベロッパーツールの設定アイコンをクリック

すると、以下のような設定画面が表示されるので、「experiments(実験)」を選択し、「Allow custom UI themes(カスタムUIテーマの使用を許可)」にチェックをしてください。

実験機能タブを選択

あとは、Chromeを再起動すれば設定が反映されます。

設定後の動作

設定後、デベロッパーツールは、以下のような表示になります。

Monokaiテーマ設定後のデベロッパーツール

HTML要素表示部分は、以下のような配色で。

HTML要素表示部分

スタイルシート表示部分は、以下のように表示されます。

スタイルシート表示部分

Sublime Textのものと比べて、多少色の鮮やかさは落ちますが目に優しい色になりました。

色が、Sublime TextのMonokaiに近いものならSO-Dark-Monokai-v3の方がいいかもしれません。

SO-Dark-Monokai-v3

以下に、設定方法が載っています。

参考 s10wen/SO-Dark-Monokai-v3 · GitHub

その他の暗色系のテーマなら、以下にもいろいろ載っています。

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

参考 Chrome Developer Toolsのテーマを開発者好みに切り替える裏ワザ | Chrome Life

まとめ

このように、Chromeの実験的機能を用いて、デベロッパーツールのテーマを結構手軽に変更することができます。

「デベロッパーツールもエディターの表示に合わせたい」とか「最近目が疲れていて出来るなら黒背景の画面を見たい」なんて場合には、良い機能だと思います。