Chrome Developer Tools でカスタム UI テーマを有効にする

半年前ぐらいの話題のようですが、Chrome Developer Tools でプロ生ちゃん が動作しなくなっているのに先ほど気付きました。Chrome 32 から Custom.css を編集して Chrome Developer Tools の見た目を変更する機能は削除されたようです。

chrome-dev-tools

カスタム UI テーマを有効にする

Chrome 33 からは、カスタム CSS を有効にする Chrome の拡張機能を用意する方法が良いようです。

手順は、chrome://flags/#enable-devtools-experiments を開いて、デベロッパーツールのテストを有効にします。

chrome1

次に、Developer Tools を開きギア アイコンから「Experiments」の「Allow custom UI themes」をチェックします。

chrome2

chrome://extensions/ を開いて「デベロッパーモード」をチェックします。「パッケージ化されていない拡張機能を読み込み」から拡張機能のフォルダーを指定します。

chrome3

フォルダー内のファイルは、情報元の css3 – Custom.css stop to work in 32.0.1700.76 m Google Chrome update – Stack Overflow の「Official method (Chrome 33+ only)」を参考にしてください。

プロ生ちゃんテーマは、UserStyleSheets.zip をダウンロードして参考にしてください。