Yuigo・ん・・・湿っぽい

最近の話題はラジオ。賛否のど真ん中を行く性格です。

Chrome DevTools: 見た目とフォントを変更する拡張機能

概要

Chrome DevTools の見た目とフォントを変更する方法を説明します。

きっかけ

Vue.js の勉強を始めたことによって DevTool を使いだし、フォント変更したいなーと思ったし、DevTool ならそれなりの方法があるだろと思ったので。

環境

手順

カスタム UI テーマの適用を有効にする

後で説明する拡張機能による見た目の変更(カスタム UI テーマ)を適用するには以下の設定が必要になります。

  • アドレスバーに chrome://flags/#enable-devtools-experiments と入力しエンターすることで設定画面に飛びます
  • Developer Tools experimentsEnabledに設定します
  • Chrome を再起動するよう促されるのでそのとおりに再起動します

f:id:m4usta13ng:20190501174808p:plain
chrome://flags/#enable-devtools-experiments

  • 再起動したらCtrl + Shift + iなどで DevTools を開き、更にF1などで設定画面を開きます
  • サイドバーからExperimentsを選択し、Allow custom UI themesのチェックを ON にします
    • WARNING が出ているので、よく読んだ上でチェックしてください
  • これでカスタム UI テーマが使えるようになりました

拡張機能の追加

テーマ

  • Chrome ウェブストアdevtools themeなどのワードで検索します
  • 良さそうなテーマが見つかったらChromeに追加します
  • 新しくDevToolsを開くと変更が適用されています

f:id:m4usta13ng:20190501174934p:plain
Draculaテーマの適用

フォント

  • DevTools Font Changerを追加します
  • アドレスバーの右にアイコンが追加されるので、右クリック -> オプションを選択します
  • font-familyに使用したいフォント名を入力します
    • 私はUtataneを使用しています
    • 下のテキストボックスはgoogle fontを使用する場合に入力するようです(試していません)。ローカルにあるフォントを使用する場合は入力不要です
  • 変更したらSaveを押下します

f:id:m4usta13ng:20190501174958p:plain
カスタムフォント設定

  • DevToolsを開き直すとフォントの変更が適用されています

f:id:m4usta13ng:20190501175017p:plain
カスタムフォントの適用後

補足: 自分でカスタムする

https://github.com/paulirish/sample-devtools-theme-extension によると自分でカスタムする方法もあるみたいです。ちょっと読めていないのでリンクのみにとどめておきます。

参考

以下のstack overflowを参考にしました。

google chrome devtools - Changing Developer Tools Font Face (family) - Stack Overflow