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