Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

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

Console

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

Sources

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

Network

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

Timeline

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

Profiles

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

Application

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

Security

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

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

Twitter Stack Overflow Slack