Chrome DevToolsを使いこなすための参考サイトまとめ

フロントエンドエンジニアの谷です。

本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。

すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！

基本的な使い方

Chrome DevTools Overview

基本はやはり公式ドキュメント。基本機能や各パネルの使い方 + ちょっとした小技なども紹介されています。ショートカットの説明もあるので合わせて覚えたいですね。

• Chrome DevTools Overview

Discover DevTools

Code Schoolというオンライン学習のWebサービスのいちコンテンツ。Google監修で、より詳しく正しいです。この後でも紹介する、デバッグ、パフォーマンス分析といったところの方法も解説しながら、実際に簡単なトレーニングもおこなうことができます。なんと無料。

• Discover DevTools

JavaScript開発、パフォーマンス・チューニング

JavaScriptデバッグ

JavaScriptまたはHTML/CSSのデバッグの基本について解説しているページ。Chrome DevToolsに限らず、Firefox+Firebugなど他のブラウザの開発者ツールでも使える方法も含まれます。

• JavaScript debugging for beginners | JavaScript | Creative Bloq
• Debugging Modern Web Applications Part 1 - Tech.Pro
• Chrome Dev Tools: JavaScript and Performance | Nettuts+

貴重な日本語リソースでは、吉川さんのこちらのスライドが秀逸。このスライドでは主にSources、Timeline、Profilesパネルについて解説しています。

• Chrome Developer Toolsを使いこなそう！

Canvasのデバッグについての紹介も。

• Canvas Inspection using Chrome DevTools - HTML5 Rocks

CoffeeScriptやTypeScriptや、Sassといったプリプロセッサによる開発、またはClosure CompilerやYUI Compressorなどのコードの圧縮によって、開発上の触るコードとの差が生まれ、デバッグが難しいということがあります。

それを解決するためのSourceMapという機能（オリジナルのコードと、コンパイル・圧縮後のファイルとひもづけるファイル）があり、それを介してDevToolsでもデバッグを容易にすることができます。下記はDevToolsで使うための方法について。

• Introduction to JavaScript Source Maps - HTML5 Rocks
• An Introduction to Source Maps | Nettuts+

パフォーマンス・チューニング

DevToolsによるパフォーマンス・チューニング、主にネットワーク系のチューニングについては、Ilya Grigorik氏のこちらのスライド。

• DevTools can do THAT?

中に登場するHARについては彼のブログでも解説されている。ページ内で紹介されている動画もチェックしよう。

• Web Performance Power Tool: HTTP Archive (HAR) - igvita.com

AirBnBという自宅や余った部屋を他人・旅行者に貸出するのを仲介するという世界的に人気のあるサービスがあり、その開発者によるパフォーマンス・チューニングの話。どのように最適化していったかというプロセスなどが見られるので必見。

• Performance Tuning - Airbnb Engineering

メモリについての解析、チューニングについて。

• Chrome DevTools — Google Developers

ネットワークだけでなく、ペイント（描画）のチューニングについても今はフォーカスされています。そのための手法など。

• Profiling Long Paint Times with DevTools’ Continuous Painting Mode - HTML5Rocks Updates

リモートデバッグ

Chrome for Androidでデバッグ

Google Playで配布されているChrome for Androidを通じてデバッグすることができます。利用するためには、Chrome for Androidの他にAndroid SDKのインストールも必要です。あとは実機にUSB接続、設定を進めれば可能になります。

• Remote Debugging on Android

[追記：2013/10/10]
@agektmrさんより、後述のCanaryバージョンであればSDK不要で、接続してchrome://inspectを開けばデバッグできるようです。安定版でも可能になるのが楽しみですね。情報ありがとうございます！

また安定版でもChrome ExtensionのADBを使えば、安定版でもSDK無しでデバッグ可能です。@t32kさんありがとうございます！

•  ADB 

iOS Mobile Safariでデバッグ

GoogleがGithubで公開しているiOS WebKit Debug Proxyを使えば、iOSシミュレータやUSB接続した実機端末でのデバッグができます。iOS WebKit Debug ProxyはHomebrewを使ってインストールができます。

• Debug iOS 6+7 Mobile Safari using the Chrome DevTools

試験的な機能を使う

Google Chrome Canary

Google Chrome Canaryは安定版として提供される前に、開発者向けの機能が試験的に実装されるバージョンのGoogle Chromeです。ほぼ毎日更新され、新しい機能やUIをいち早く試すことができるのですが、不安定でもあるため、バグによって操作できなくなるということもあります。ただ安定版のものとは別でインストール、起動できるので、Canaryの影響で安定版が動かなくなるということは基本的にありません。

開発者としては新しい機能に触れられるのは興味深いことですし、インストールして置いて損はないかとおもいます。

• Google Chrome Canary

なんと今回紹介したGoogle Chrome + DevToolsに関わる開発者がサイバーエージェントにやってくる！

2013年10月30日（水）当社主催の技術セミナー「Frontrend（フロントレンド）」にて、Google本社からゲストスピーカー（Paul Irish、Addy Osmani、Jake Archibald）を招き、Chromeをテーマにしたイベント「Frontrend x Chrome Tech Talk Night Extended」を開催します！

DevToolsや周辺ツールを使っていかに開発効率をあげるか、ウェブ開発におけるパフォーマンス最適化などのトピックについて、世界を代表する開発者である彼らから聞けるのは本当に貴重ですので、ぜひ皆さんご参加ください！

申し込みはこちらから

※残席残り僅かです。

あなたの欲しい機能が実装されるかも？

イベントのあとには懇親会もあるので、すでにDevToolsを使いこなしている人も、今回の記事をみて使い始めた人も、彼らに欲しい機能を要望すれば、それが実装されるかもしれません。当日までにDevToolsをどんどん使いましょう。

最後まで記事をお読みいただきありがとうございました、またイベントに参加される方は会場でお会いしましょう。