Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

Chrome Developer Toolsのテーマを開発者好みに切り替える裏ワザ

Chromeをメインで使っている開発者の方は、Developer Toolsを開く機会も多いと思います。

一昔前はFirefoxでFirebugsを使っていた人も、Chromeのバージョンが上がったことによりDeveloper Toolsでも同等のことができるようになりました。

Chrome Developer Toolsを使えば、WebインスペクターでDOMツリーの確認やCSSの微調整、JavaScriptのソースデバッグなどができるので非常に便利です。

しかし、開発者であれば、使えば使いこなすほど自分好みのスタイルに合わせたくなるものです。

特にソースを見る時のカラーリングは、開発スピードにも影響するほどです。

できれば、Chrome Developer Toolsのスタイルも普段使っているエディタと同じスタイルに変更したいですよね。

そこで今回は、Developer Toolsのテーマを変更する裏ワザをご紹介したいと思います。

Chromeには、ユーザ用のスタイルシートを用意することで、ブラウザの見た目をカスタマイズする機能が予め用意されています。

下記の場所にカスタムスタイルシートが格納されています(スタイルシートは、OSによって格納場所が違います。)

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

WindowsC:/Users/YourUsername/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css

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

初期状態では、空のスタイルシートファイルが用意されています。 (プロファイルを複数使い分けている場合は、Defaultの部分が各プロファイルフォルダになります)

スタイルシートファイルを編集する前に、Chromeを終了してください。 (直接ファイルをエディタで編集する場合は終了しなくても問題ありません。ファイルを上書きコピーする場合は終了しておく必要があります)

自分でスタイルシートをいじっても良いのですが、既に様々なテーマのスタイルシートが配布されているので、ダウンロードして利用してみましょう。

MNML Theme

Monokai Dark

Tomorrow Theme

IR_Black Theme

Solarized Dark

Ruby Blue

Expresso

Inversion

Dark Theme

Dark Dev

WebLight Theme

スタイルシートのファイルをコピーしてから、Chromeを起動するとDeveloper Toolsのスタイルが変わります。

これで、Chromeでソースを確認するのも違和感なく使えるようになりますねw

それでは、また!