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 的一般簡介，請參閱開發人員工具 API 摘要。

資訊清單

如要使用這項 API，必須在資訊清單中宣告下列鍵。

"devtools_page"

範例

下列程式碼會在載入圖片時，記錄所有大於 40 KB 的圖片網址：

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，請從 chrome-extension-samples 存放區安裝 devtools API 範例。

類型

Request

代表文件資源 (指令碼、圖片等) 的網路要求。如需參考資料，請參閱 HAR 規格。

屬性

  • getContent

    void

    傳回回應主體的內容。

    getContent 函式如下所示： 

    () => {...}

    • returns

      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

    • 網址

      字串

onRequestFinished

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

網路要求完成且所有要求資料都可用時觸發。

參數

  • callback

    函式

    callback 參數如下： 

    (request: Request) => void