Chrome DevTools | Web | Google Developers
学習日: 180907
所要時間: 5分
Chrome DevTools
Chromeのデバッグツールのセット。
Chrome DevTools を開く
Cmd+Opt+i
パネルの概要
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] パネルでは、混合コンテンツの問題、証明書の問題などをデバッグできます。
質問事項
特になし
所感
特になし