4.2 Sources・Network

Sources Panel & Network Panel

Sourcesパネル

JavaScriptのデバッグを行うための強力なツール。ブレークポイントの設定、ステップ実行、変数の監視が可能。

パネル構成

エリア 機能
左: Navigator ページのファイルツリー
中: Editor ソースコード表示・編集
右: Debugger デバッグコントロール

ブレークポイント

コード実行を一時停止して、変数の状態を確認できる。

ブレークポイントの種類

種類 設定方法 用途
行ブレークポイント 行番号をクリック 特定行で停止
条件付き 行番号を右クリック → Add conditional 条件を満たす時のみ停止
ログポイント 行番号を右クリック → Add logpoint 停止せずログ出力
DOMブレークポイント Elements → Break on DOM変更時に停止
XHR/Fetch 右サイドバー → XHR/fetch Breakpoints 特定URLリクエスト時
イベントリスナー 右サイドバー → Event Listener Breakpoints 特定イベント発生時
例外 Pause on exceptions ボタン 例外発生時に停止
条件付きブレークポイントの例 
// i が 100 の時だけ停止
i === 100

// 特定の値を含む場合
user.name === 'admin'

// 配列の長さが変わった時
arr.length > 10

ステップ実行

ブレークポイントで停止後、コードを1行ずつ実行して動作を追跡できる。

操作 ショートカット 動作
Resume F8 次のブレークポイントまで実行
Step over F10 次の行へ（関数内に入らない）
Step into F11 関数内に入る
Step out Shift+F11 現在の関数を抜ける
Deactivate Ctrl+F8 全ブレークポイントを一時無効化

デバッグペイン

右サイドバーには様々なデバッグ情報が表示される。

Watch

任意の式を登録して値を監視。「+」で追加。

// 監視例
user.name
items.length
calculateTotal()

Call Stack

現在の関数呼び出し履歴。クリックでその時点のコンテキストを確認。

Scope

現在のスコープ内の変数一覧。Local、Closure、Globalに分類。

Breakpoints

設定済みブレークポイントの一覧。チェックボックスで個別に有効/無効。

ソースマップ

ミニファイ・トランスパイルされたコードを元のソースで表示・デバッグできる。

設定確認 DevTools Settings → Preferences → Enable JavaScript source maps がONであること。TypeScript、Babel、Webpackなどで生成された.mapファイルが必要。

Networkパネル

ページが行うすべてのネットワークリクエストを記録・分析するツール。

基本操作

操作 方法
記録開始/停止 赤い●ボタン
ログクリア 🚫ボタン
キャッシュ無効 「Disable cache」チェック
オフライン模擬 「No throttling」→「Offline」
低速回線模擬 「Slow 3G」「Fast 3G」等を選択

リクエストのフィルタリング

フィルタ 説明
All すべてのリクエスト
Fetch/XHR Ajax、Fetch APIリクエスト
JS JavaScriptファイル
CSS スタイルシート
Img 画像ファイル
Media 動画・音声
Font Webフォント
Doc HTMLドキュメント
WS WebSocket

テキストフィルタ

// URLでフィルタ
api.example.com

// ステータスコードでフィルタ
status-code:404

// メソッドでフィルタ
method:POST

// サイズでフィルタ
larger-than:1M

// 複数条件
status-code:200 method:GET

リクエスト詳細

リクエストをクリックすると詳細パネルが表示される。

Headers タブ

  • General: URL、メソッド、ステータスコード
  • Response Headers: サーバーからの応答ヘッダー
  • Request Headers: 送信したリクエストヘッダー
  • Query String Parameters: URLパラメータ
  • Form Data / Request Payload: POSTデータ

Preview / Response タブ

  • Preview: JSONを整形表示、画像をプレビュー
  • Response: 生のレスポンスデータ

Timing タブ

リクエストの各フェーズにかかった時間を表示。

  • Queueing: キューで待機した時間
  • Stalled: 送信開始までの待機時間
  • DNS Lookup: DNS解決時間
  • Initial connection: TCP接続確立時間
  • SSL: SSL/TLSハンドシェイク時間
  • TTFB: 最初のバイトまでの時間
  • Content Download: コンテンツダウンロード時間

実務でのテクニック

便利な機能
  • Copy as cURL: リクエストを右クリック → cURLコマンドとしてコピー
  • Copy as fetch: fetchコードとしてコピー
  • Block request URL: 特定リクエストをブロック
  • Replay XHR: XHRリクエストを再実行
  • HAR export: 全リクエストをHARファイルとして保存
拡張機能開発での注意 拡張機能のService Workerからのリクエストは、chrome://extensionsのDevToolsで確認する。Content Scriptからのリクエストは、そのページのNetworkパネルに表示される。
参考文献
[1] Chrome DevTools - Debug JavaScript
[2] Chrome DevTools - Inspect Network Activity