Chrome Developer Tools でプロ生ちゃん
すばらしい情報が公開されていたので、さっそく試してみました。
- そういや、Google ChromeのDeveloper ToolsってCSS当てられる気がする – Pastalablog in はてな
- Chrome Developer Toolsをカスタマイズしてみました | Soufflecode
改善余地はいろいろとありそうだけど、とりあえずこれで。
Google Chrome Developer Tools を CSS でカスタマイズ
Custom.css を編集します。
Windows
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.cssMac
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.cssLinux
~/.config/chromium/Default/User StyleSheets/Custom.css
内容は次のようにします。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .panel { | |
| background: url('http://pronama.azurewebsites.net/chrome/sd_eye0.png') no-repeat; | |
| background-size: contain; | |
| background-position: 10px -5px; | |
| } |
参考サイトには、詳細やいろいろカスタマイズされているので参照してみてください。
追記: Custom.css を有効にする
Chrome 32 から上記機能は削除されたようです。Chrome 33 からはデベロッパーツールのテストを有効後、拡張機能として追加します。
- chrome://flags/#enable-devtools-experiments を開いて、デベロッパー ツールのテストを有効にします。
- Developer Tools を開きギアアイコンから「Experiments」の「Allow custom UI themes」をチェックします。
- 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 をダウンロードして参考にしてくださいね。