Chrome DevTools は、Google Chrome に組み込まれたウェブ作成およびデバッグツールのセットです。 DevTools を使用してサイトの反復処理、デバッグ、プロファイリングを行います。
試験運用: Chrome Canary には、常に最新の DevTools が備わっています。
Chrome DevTools を開く
- Chrome メニューから [More Tools] > [Developer Tools] を選択します。
- ページ要素を右クリックして、[Inspect] を選択します。
- キーボード ショートカットの Ctrl+Shift+I キー（Windows）または Cmd+Opt+I キー（Mac）を使用します。
パネルの概要
Device Mode
Device Mode を使用して、レスポンシブなモバイル ファーストのウェブ エクスペリエンスを構築します。
Elements
[Elements] パネルでは、DOM と CSS を自由に操作してサイトのレイアウトやデザインを反復処理できます。
Console
[Console] では、開発中に診断情報を記録したり、その情報をシェルとして使用してページ上の JavaScript を操作したりできます。
Sources
[Sources] パネルでブレークポイントを使用して JavaScript をデバッグしたり、ワークスペース経由でローカル ファイルを接続して DevTools ライブエディタを使用したりできます。
Network
[Network] パネルでは、リクエストされたリソースやダウンロードされたリソースを詳しく分析したり、ページの読み込みパフォーマンスを最適化したりできます。
Timeline
[Timeline] では、サイトのライフサイクル中に発生するさまざまなイベントの記録や調査によってページの実行時パフォーマンスを向上できます。
Profiles
[Profiles] パネルは、メモリリークの追跡などのために、[Timeline] で提供される情報よりさらに多くの情報が必要な場合に使用します。
Application
[Resources] パネルでは、IndexedDB や Web SQL データベース、ローカル ストレージやセッション ストレージ、Cookie、アプリケーション キャッシュ、画像、フォント、スタイルシートなど、読み込まれたすべてのリソースを調査できます。
Security
[Security] パネルでは、混合コンテンツの問題、証明書の問題などをデバッグできます。