Chromeのデベロッパーツールは、テーマを変更して利用することができます。
今回は、そのデベロッパーツールのテーマを暗色系のテーマ「Monokai」に変更する方法を紹介します。
僕が普段使用しているテキストエディタのSublime TextのデフォルトテーマもMonokaiです。Monokaiテーマとは以下のような配色のテーマで、目に優しく見やすいので個人的に気に入っています。
Monokaiとは元々、Wimer Hazenberg氏が作成したTextmate用のColor Styleです。
photo by Clive Darra
目次
主な手順
デベロッパーツールをMonokaiテーマにする主な手順は以下です。
- ChromeウェブストアからMonokaiテーマのダウンロード
- 試験運用機能の「デベロッパーツールのテストを有効にする」を有効にする
- デベロッパーツールの設定からテーマを有効にする
主に行うことは、上記の3手順です。5分もかからずに設定できるかと思います。
テーマのダウンロード
まずは、Google Chromeで「Antonio Brandao Devtools Monokai Theme（現在配布終了）」に移動してください。
以下のように表示されるので、「Chromeに追加」ボタンを押してください。
ダイアログが表示されるので、「追加」を押せばダウンロードは完了です。
デベロッパーツールのテストを有効にする
次に、デベロッパーツールで試験的に導入されている機能を利用できるようにします。
まずは、Chromeのアドレスバーに「chrome://flags/#enable-devtools-experiments」と入力してエンターを押してください。
すると、「デベロッパーツールのテストを有効にする」という設定項目が、黄色でマークアップされた設定部分が表示されるので、「有効にする」をクリックします。
「有効にする」をクリックしたら、Chrome画面下に「今すぐ再起動」というボタンが表示されるので、ボタンを押して再起動をします。
テーマを有効にする
再起動後、F12キーを押すか、右クリックから「要素を検証」を選択してデベロッパーツールを起動します。
デベロッパーツールが表示されたら、設定アイコンをクリックします。
すると、以下のような設定画面が表示されるので、「experiments（実験）」を選択し、「Allow custom UI themes（カスタムUIテーマの使用を許可）」にチェックをしてください。
あとは、Chromeを再起動すれば設定が反映されます。
設定後の動作
設定後、デベロッパーツールは、以下のような表示になります。
HTML要素表示部分は、以下のような配色で。
スタイルシート表示部分は、以下のように表示されます。
Sublime Textのものと比べて、多少色の鮮やかさは落ちますが目に優しい色になりました。
色が、Sublime TextのMonokaiに近いものならSO-Dark-Monokai-v3の方がいいかもしれません。
以下に、設定方法が載っています。
参考 s10wen/SO-Dark-Monokai-v3 · GitHub
その他の暗色系のテーマなら、以下にもいろいろ載っています。
参考 Chromeのデベロッパーツールが見やすくなる！デベロッパーツールのUIをダーク系に変更する方法 | コリス
参考 Chrome Developer Toolsのテーマを開発者好みに切り替える裏ワザ | Chrome Life
まとめ
このように、Chromeの実験的機能を用いて、デベロッパーツールのテーマを結構手軽に変更することができます。
「デベロッパーツールもエディターの表示に合わせたい」とか「最近目が疲れていて出来るなら黒背景の画面を見たい」なんて場合には、良い機能だと思います。
