Chrome Developer Tools でプロ生ちゃん

2014/05/29Development,Pronama-chanChrome,Google

すばらしい情報が公開されていたので、さっそく試してみました。

chrome-dev-tools

改善余地はいろいろとありそうだけど、とりあえずこれで。

Google Chrome Developer Tools を CSS でカスタマイズ

Custom.css を編集します。

  • Windows

    %LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

  • Mac

    ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

  • Linux

    ~/.config/chromium/Default/User StyleSheets/Custom.css

内容は次のようにします。

https://gist.github.com/jz5/7956439

参考サイトには、詳細やいろいろカスタマイズされているので参照してみてください。

追記: Custom.css を有効にする

Chrome 32 から上記機能は削除されたようです。Chrome 33 からはデベロッパーツールのテストを有効後、拡張機能として追加します。

  1. chrome://flags/#enable-devtools-experiments を開いて、デベロッパー ツールのテストを有効にします。
  2. Developer Tools を開きギアアイコンから「Experiments」の「Allow custom UI themes」をチェックします。
  3. chrome://extensions/ を開いて「デベロッパーモード」をチェックし、「パッケージ化されていない拡張機能を読み込み」を開きます。下記のファイルを含むフォルダーを指定します。
  • manifest.json
  • devtools.html
  • devtools.js
  • Custom.css

css3 – Custom.css stop to work in 32.0.1700.76 m Google Chrome update – Stack Overflow を参考にしました。

上記ファイルは、UserStyleSheets.zip をダウンロードして参考にしてくださいね。

Development,Pronama-chanChrome,Google

Posted by jz5