Chrome Developer Tools でプロ生ちゃん

2013/12/142014/05/29Development,Pronama-chanChrome,Google

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

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

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

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

	.panel {
	background: url('http://pronama.azurewebsites.net/chrome/sd_eye0.png') no-repeat;
	background-size: contain;
	background-position: 10px -5px;
	}

view raw

Custom.css

hosted with ❤ by GitHub

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

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

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

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