ウェブサイトを作る人やウェブアプリを開発する人にとって開発用機能は長い付き合いになるツールだと思います。

そこで、自分好みにいろいろと手を加えてみて、より使いやすくしてみましょう、というお話です。

尚、書いていたら長くなってきたので2回に分けました。

仕組みを知る

GoogleChrome ((ChromeにかぎらずChromium系ブラウザはみんなこんなかんじかもしれません)) は、表示周りの様々な所がHTMLでつくられているため、結構自分好みにいじれるようです。

例えば、ソースコードの表示で表示されるソースビューワなんかもそうでして、ソースビューワのなかで更にデベロッパーツールを立ち上げると（さすがにソースビューワの中でソースを表示はできなかったｗ）

 こんなかんじで webkit-line-gutter-backdrop という、DIV要素のあとからテーブルでソースが書かれているのがわかります。

つまり、このテーブルに対してスタイルシートを書いていけば、見た目を自由に変更できるわけですね。

スタイルシートの保存場所

じゃあどこにスタイルシートを書くのかというと、Chromeのリソースの中にCustom.cssというものがあります。

Macだったら

/Users/(ユーザー名)/Library/Application Support/Google/Chrome/Default/User StyleSheets/

Windowsだと、最近のOSなら

C:\Users\(ユーザー名)\AppData\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\

XPあたりだと

C:\Documents and Settings\(ユーザー名)\Locao Settings\Application Data\Google\Chrome\User Data\Default\User StylesSheets\

にあります。

見つけたら、あとで何か合った時に元に戻せるようはじめから入ってるCSSをまずコピーして、別の名前にリネームしておきましょう。 ((といってもデフォルトだと空のCSSファイルだし、ファイルが無ければ自動的に作られるようですのでそこまで神経質になることもないですが…。))

ソースビューワの見た目をいじる

実はこのCustom.cssですが、ソースビューワとデベロッパーツール、両方の見た目を定義しています。（もしかしたら他のHTMLで書かれている部分もここで定義してるかもわかりません）

なので、一部だけにCSSを適用したい場合は、クラス指定などをして特定の箇所にだけ効かせないといけませんが、先程も見たように、コードを表示しているテーブルにはクラスがありません。

ですが、そのかわり直前に

 というDIV要素があります。

ですので、これを基準に隣接セレクタを使って

 という風にすればよさそうな感じですね。

設定例

自分はこんなかんじにカスタマイズしました。

• 背景真っ白がきつかったのでちょっとグレーに
• フォントをRictyに
• フォントサイズを調整
• ついでに今マウスがいる行を強調する
• タブのサイズを狭くする ((tab-sizeプロパティはまだ実験段階のプロパティらしいですが、一応Chromeはバージョン21から対応していますし、どうせここはChromeからしか見られませんので使ってみました。))

使用中のコード（記事作成時点）

 今はこれをベースに少し使っては調整して、自分なりの最適な設定を模索中です。

因みにこの時点での見た目のサンプルはは冒頭のスクリーンショットをご覧下さい。

デベロッパーツールの見た目をいじる

 前述のように、このCustom.cssではソースビューワ以外に、デベロッパーツールの見た目も変更できます。

しかし、当たり前ですがデベロッパーツールの中で更にデベロッパーツールを開くことはできませんので、このままでどの要素を選択すればいいのかがわかりません。

ですが、世の中にはこれらをいじるためのCSSを用意してくれている人がいて、様々な配色のテーマを公開してくれています。 

Themes for Chrome Developer Tools- devthemez

ですので、これらのテーマから気に入ったものを探してみて、そこから改造していくのがいいかもしれません。

ただし、テーマの導入は自己責任でお願いします。

また、先にソースビューワのCSSをいじっている場合、当然それらのCSSは上書きされてしまいますので、変更をバックアップしておくか、先にデベロッパーツールのテーマを固めてからソースビューワの方をいじると良いと思います。