Chrome Life

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

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

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

【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を終了してください。
(直接ファイルをエディタで編集する場合は終了しなくても問題ありません。ファイルを上書きコピーする場合は終了しておく必要があります)

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

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

それでは、また!

【なかなか仕事が思うどおりに進まない方へ】
やるべきタスクが消化できずに溜まっていく一方で困っている方に、それを解消する方法とツールを紹介しています。このツールを使うことで、重要な仕事にフォーカスできるので、仕事が空回りせずに、地に足の着いた進め方ができるようになりますよ。こちらも合わせてチェックしてみてください。
一日のやるべき事に集中できる!クールなタスク管理ダッシュボード「Momentum」

【iGoogleのようなスタートページを探している方へ】
iGoogleのサービス終了後、代替サービスとして良いものが見つからない方に朗報です。26種類のHDテーマ、17種類のウィジェット、複数タブ機能、音声検索の対応などスタートページとして十分な機能が備わったものを見つけました。こちらも合わせてチェックしてみてください。
待望のiGoogle代替サービスが登場!クールで高度なカスタマイズが可能なスタートページ「iChrome」

【ソースコードをブログで公開している方へ】
ソースコードがメインの記事だとどうしても画像が無いそっけない記事になってしまうため、FacebookやGoogle+でシェアされた時に目立ちにくくなってしまいます。そんな時は、ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」が便利です。
ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」

Emacs、Vimを極めるためのオススメ書籍

タグ: , , , ,

新着記事

この記事の読者におすすめの記事

このブログを購読しませんか?

RSSリーダーを使うと、このブログの更新情報がすぐに入手できるようになります。
このブログのRSSをRSSリーダーに登録すれば、更新されるたびに記事の本文を読むことができます。

Twitterでもこのブログの更新情報や筆者が見つけた情報をつぶやいていますので、@opakenをフォローしていただけるとうれしいです。

Facebookのファンページも用意しています。こちらでも更新情報を配信しています。「いいね!」をクリックしてもらうだけで購読できます。