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
【Windows】
C:/Users/YourUsername/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css
【Ubuntu】
~/.config/chromium/Default/User StyleSheets/Custom.css
初期状態では、空のスタイルシートファイルが用意されています。 (プロファイルを複数使い分けている場合は、Defaultの部分が各プロファイルフォルダになります)
スタイルシートファイルを編集する前に、Chromeを終了してください。 (直接ファイルをエディタで編集する場合は終了しなくても問題ありません。ファイルを上書きコピーする場合は終了しておく必要があります)
自分でスタイルシートをいじっても良いのですが、既に様々なテーマのスタイルシートが配布されているので、ダウンロードして利用してみましょう。
スタイルシートのファイルをコピーしてから、Chromeを起動するとDeveloper Toolsのスタイルが変わります。
これで、Chromeでソースを確認するのも違和感なく使えるようになりますねw
それでは、また!