Chrome Developer Toolsにテーマを適用して、いい感じにカスタマイズしてみました。 | Select *
Web Web制作 コンピュータ ブラウザ

Chrome Developer Toolsにテーマを適用して、いい感じにカスタマイズしてみました。

chrome-devtools-customオハヨウゴザイマス!
Chrome Developer Toolsにはお世話になっている@deepblue_willです。

Chrome使いのWeb製作者でChrome Developer Toolsを使わない人はいないでしょう。
そんな便利な開発ツールをテーマを使って素敵な感じにカスタマイズしてみました。


CSSでカスタマイズできるのです。

今日お話するカスタマイズは
こんなかんじのChrome Developer Toolsを
chrome-devtools-custom4
こんなオシャレなかんじにカスタマイズしちゃおうという話です。
chrome-devtools-custom2
Chrome developer Toolsもブラウザの一部ということで、CSSを定義することで自分の好みにカスタマイズができます
ただ、そんなの0から作るのは至難の技。。

でも、ご安心ください。
テーマという形でCSSを無料配布しております。

それがこのサイト。
Themes for Chrome Developer Tools- devthemez

さて、肝心のCSSの適用方法ですが、まず好きなテーマをダウンロードして、そのなかにあるCustom.cssの中身を全部コピーします。
そのコピーした内容を
Mac
/Library/Application Support/Google/Chrome/Default/User StyleSheets/
Windows
\Users\{username}\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\
にあるCustom.cssにペーストすれば完了です。
Chromeの再起動の必要はありません。保存した瞬間にテーマが適用されます。

テーマのカスタマイズ

今回私が選んだのが「SO-Dark-Monokai-v3」というテーマ。
私の好きな黒背景でかつ、よく使う2つのタブ「Console」と「Element」が隣り合うようになるのが気に入りました。

色が変えられるなら、フォントも変えられるだろう!と思い私が好きなプログラミング用フォント「Ricty」に変えてみることにしました。
(Rictyについては「プログラムに最適なフォント『Ricty』を超簡単にインストール[Mac限定]」を読むといいと思います)

変更箇所は2箇所です。

まず530行目あたりを次のように変更します。
#-webkit-web-inspector .monospace,
#-webkit-web-inspector .source-code {
  color: #CCC !important;
  font-size: 13px !important;
  font-family: Ricty, monospace !important;
}


フォントサイズが小さいところがあるので、
次に1011行目あたり(Layoutっていうコメントあたり)を次のように変更します。
#-webkit-web-inspector #storage-views .script-view,
#-webkit-web-inspector #elements-content,
#-webkit-web-inspector #network-views .text-editor-contents,
#-webkit-web-inspector #script-resource-views .script-view {
  background: #242424 !important;
  font-size: 13px !important;
}


以上です。
ちなみに、WindowsにRictyを入れるのはめんどいので、
最初から入っているConsolasとMeiryoを指定するといいと思います。
#-webkit-web-inspector .monospace,
#-webkit-web-inspector .source-code {
  color: #CCC !important;
  font-size: 13px !important;
  font-family: Consolas, Meiryo, monospace !important;
}



最後に

1つ問題があって、Sourcesパネルが若干見づらいです。
どこを直したらいいのかよくわからないし、そんな頻繁に使うところでもないので放置しましたが、
よく使う人は対策したほうがいいかもです。

ちなみに、私の大好きなSleipnir4(Windows版)でもテーマを適用することができました
chrome-devtools-custom1

Sleipnir4の場合は、

\Users\{username}\AppData\Roaming\Fenrir Inc\Sleipnir\setting\modules\ChromiumViewwe\Default\User StyleSheets

のCustom.cssを変えればいけます。

Web製作者の皆様、興味があればやってみてください!

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)