Google Chrome Developer Toolsの見た目を変える。

今更だけどタイトルとおりです。

MacでもWindowsxでもLinuxでもできます。

僕もそうですが、Firefox + firebugから移行した開発者の方も多いんじゃないかと
思います。

デフォルトだとこんな感じ

Screen Shot 2013-10-10 at 15.48.43

いじくるとこんな感じ

Screen Shot 2013-10-10 at 16.03.06

変更は簡単です。

Chrome Developer Toolsの見た目もスタイルシートで定義が可能です。
それぞれの環境で以下のパスが対象ファイルになります。
おそらくデフォルトでは中身はからっぽ。

  • windows: C:/Users/YourUsername/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css
  • Mac: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
  • ubuntu: ~/.config/chromium/Default/User StyleSheets/Custom.css

※ちなみに僕はchromium,ironを利用しているので、そういった方は
パスの”Google/Chrome”の部分は”chromium”を置換えれば同じようにスタイルの変更ができます。

Githubにはいろんな人が作ったテーマが公開されています。
これらを使えば簡単にかっこよくできます。

Github search(関係ないファイルもいっぱい検索ひっかっかってますが・・・)

Chrome Develper Toolsを多用するかたは是非。

Google Chrome Developer Toolsの見た目を変える。」への1件のフィードバック

  1. へえ、変えられるんですね。デフォルトのカラーでも見やすいですけど、PCによっては灰色の文字とかが見えにくかったりするので、そういう時や気分転換にはいいですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です