chrome.devtools.network

説明

chrome.devtools.network API を使用すると、デベロッパー ツールの [ネットワーク] パネルに表示されるネットワーク リクエストに関する情報を取得できます。

ネットワーク リクエスト情報は、HTTP アーカイブ形式( HAR)で表されます。HAR の説明は、このドキュメントのスコープ外です。HAR v1.2 仕様をご覧ください。

HAR の観点から見ると、chrome.devtools.network.getHAR() メソッドは HAR ログ全体を返しますが、 chrome.devtools.network.onRequestFinished イベントは、イベント コールバックの引数として HAR エントリを提供します。

効率上の理由から、リクエスト コンテンツは HAR の一部として提供されません。リクエストの getContent() メソッドを呼び出してコンテンツを取得できます。

ページの読み込み後にデベロッパー ツール ウィンドウを開くと、getHAR() から返されるエントリの配列に一部のリクエストが含まれないことがあります。ページを再読み込みして、すべてのリクエストを取得してください。通常、getHAR() から返されるリクエストのリストは、[ネットワーク パネル] に表示されるリクエストと一致します。

デベロッパー ツール API の使用方法の概要については、DevTools API の概要をご覧ください。

マニフェスト

次のコードは、40 KB を超えるすべての画像の URL を読み込み時に記録します。

chrome.devtools.network.onRequestFinished.addListener(
  function(request) {
    if (request.response.bodySize > 40*1024) {
      chrome.devtools.inspectedWindow.eval(
          'console.log("Large image: " + unescape("' +
          escape(request.request.url) + '"))');
    }
  }
);

この API を試すには、devtools API のサンプルchrome-extension-samples リポジトリからインストールします。

Request

ドキュメント リソース(スクリプト、画像など)のネットワーク リクエストを表します。リファレンスについては、HAR 仕様をご覧ください。

プロパティ

  • getContent

    void

    レスポンス本文のコンテンツを返します。

    getContent 関数の例を次に示します。

    () => {...}

    • 戻り値

      Promise<object>

      保留中

      リクエストが完了したときにレスポンス本文を受け取る関数。

メソッド

getHAR()

chrome.devtools.network.getHAR(): Promise<object>

既知のすべてのネットワーク リクエストを含む HAR ログを返します。

戻り値

  • Promise<object>

    保留中

    リクエストが完了したときに HAR ログを受け取る関数。

イベント

onNavigated

chrome.devtools.network.onNavigated.addListener(
  callback: function,
)

検査対象のウィンドウが新しいページに移動したときに発生します。

パラメータ

  • callback

    関数

    callback パラメータの例を次に示します:

    (url: string) => void

    • URL

      文字列

onRequestFinished

chrome.devtools.network.onRequestFinished.addListener(
  callback: function,
)

ネットワーク リクエストが完了し、すべてのリクエスト データが使用可能になったときに発生します。

パラメータ

  • callback

    関数

    callback パラメータの例を次に示します:

    (request: Request) => void