chrome.devtools.network

說明

使用 chrome.devtools.network API 擷取開發人員工具「網路」面板中顯示的網路要求相關資訊。

資訊清單

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

"devtools_page"

如需開發人員工具 API 的一般簡介，請參閱開發人員工具 API 摘要。

總覽

網路要求資訊會以 HTTP 封存格式 (HAR) 表示。本文不討論 HAR 的說明，請參閱 HAR v1.2 規格。

就 HAR 而言，chrome.devtools.network.getHAR() 方法會傳回整個 HAR 記錄，而 chrome.devtools.network.onRequestFinished 事件則會將 HAR 項目做為事件回呼的引數。

請注意，基於效率考量，要求內容不會納入 HAR。您可以呼叫要求的 getContent() 方法來擷取內容。

如果是在網頁載入後才開啟「開發人員工具」視窗，getHAR()傳回的項目陣列中可能會缺少部分要求。重新載入頁面即可取得所有要求。一般來說，getHAR() 傳回的要求清單應與「網路」面板中顯示的清單相符。

範例

下列程式碼會在載入圖片時，記錄所有大於 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

    Promise

    傳回回應主體的內容。

    getContent 函式如下所示： 

    (callback?: function) => {...}

    • callback

      函式 選填

      callback 參數如下： 

      (response: object) => void

      • 回應

        物件

        待處理

        包含回應主體及其編碼方式的物件。

        • 內容

          字串

          回應主體的內容 (可能經過編碼)。

        • encoding

          字串

          如果內容未經過編碼，則為空白；否則為編碼名稱。目前僅支援 base64。

    • returns

      Promise<object>

      待處理

      要求完成時接收回應主體的函式。

      只有資訊清單 V3 以上版本支援 Promise，其他平台則需使用回呼。

方法

getHAR()

Promise 
chrome.devtools.network.getHAR(
  callback?: function,
): Promise<object>

傳回包含所有已知網路要求的 HAR 記錄。

參數

  • callback

    函式 選填

    callback 參數如下： 

    (harLog: object) => void

    • harLog

      物件

      HAR 記錄。詳情請參閱 HAR 規格。

傳回

  • Promise<object>

    待處理

    要求完成時接收 HAR 記錄的函式。

    只有資訊清單 V3 以上版本支援 Promise，其他平台則需使用回呼。

事件

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