Chrome DevTools

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 を使用して、レスポンシブなモバイル ファーストのウェブ エクスペリエンスを構築します。

• Device Mode
• レスポンシブな端末固有ビューポートのテスト
• センサーのエミュレート: 位置情報と加速度計

Elements

[Elements] パネルでは、DOM と CSS を自由に操作してサイトのレイアウトやデザインを反復処理できます。

• ページの調査と微調整
• スタイルの編集
• DOM の編集

Console

[Console] では、開発中に診断情報を記録したり、その情報をシェルとして使用してページ上の JavaScript を操作したりできます。

• コンソールの使用
• コマンドラインからの操作

Sources

[Sources] パネルでブレークポイントを使用して JavaScript をデバッグしたり、ワークスペース経由でローカル ファイルを接続して DevTools ライブエディタを使用したりできます。

• ブレークポイントを使用したデバッグ
• 難読化されたコードのデバッグ
• DevTools ワークスペースによる永続化の設定

Network

[Network] パネルでは、リクエストされたリソースやダウンロードされたリソースを詳しく分析したり、ページの読み込みパフォーマンスを最適化したりできます。

• [Network] パネルの基本
• Resource Timing について
• ネットワーク スロットリング

Timeline

[Timeline] では、サイトのライフサイクル中に発生するさまざまなイベントの記録や調査によってページの実行時パフォーマンスを向上できます。

• パフォーマンスの考え方
• 実行時のパフォーマンスの分析
• レイアウトの強制同期の診断

Profiles

[Profiles] パネルは、メモリリークの追跡などのために、[Timeline] で提供される情報よりさらに多くの情報が必要な場合に使用します。

• JavaScript CPU プロファイラ
• ヒープ プロファイラ

Application

[Resources] パネルでは、IndexedDB や Web SQL データベース、ローカル ストレージやセッション ストレージ、Cookie、アプリケーション キャッシュ、画像、フォント、スタイルシートなど、読み込まれたすべてのリソースを調査できます。

• データの管理

Security

[Security] パネルでは、混合コンテンツの問題、証明書の問題などをデバッグできます。

• Security

ディスカッションに参加する

Twitter Stack Overflow Slack