Chrome DevTools: 見た目とフォントを変更する拡張機能
概要
Chrome DevTools の見た目とフォントを変更する方法を説明します。
きっかけ
Vue.js の勉強を始めたことによって DevTool を使いだし、フォント変更したいなーと思ったし、DevTool ならそれなりの方法があるだろと思ったので。
環境
手順
カスタム UI テーマの適用を有効にする
後で説明する拡張機能による見た目の変更(カスタム UI テーマ)を適用するには以下の設定が必要になります。
- アドレスバーに
chrome://flags/#enable-devtools-experiments
と入力しエンターすることで設定画面に飛びます Developer Tools experiments
をEnabled
に設定します- Chrome を再起動するよう促されるのでそのとおりに再起動します
- 再起動したら
Ctrl + Shift + i
などで DevTools を開き、更にF1
などで設定画面を開きます - サイドバーから
Experiments
を選択し、Allow custom UI themes
のチェックを ON にします- WARNING が出ているので、よく読んだ上でチェックしてください
- これでカスタム UI テーマが使えるようになりました
拡張機能の追加
テーマ
- Chrome ウェブストアで
devtools theme
などのワードで検索します - 良さそうなテーマが見つかったら
Chromeに追加
します - 新しくDevToolsを開くと変更が適用されています
フォント
- DevTools Font Changerを追加します
- アドレスバーの右にアイコンが追加されるので、右クリック -> オプションを選択します
font-family
に使用したいフォント名を入力します- 変更したら
Save
を押下します
- DevToolsを開き直すとフォントの変更が適用されています
補足: 自分でカスタムする
https://github.com/paulirish/sample-devtools-theme-extension によると自分でカスタムする方法もあるみたいです。ちょっと読めていないのでリンクのみにとどめておきます。
参考
以下のstack overflowを参考にしました。
google chrome devtools - Changing Developer Tools Font Face (family) - Stack Overflow