本頁面由 Cloud Translation API 翻譯而成。

使用 Chrome 開發人員工具對推測規則進行偵錯

Barry Pollard

如前一篇文章所述，推測規則可用於預先擷取及預先算繪下一個網頁瀏覽內容。這樣一來，網頁載入速度就能大幅提升，甚至達到即時載入，進而大幅改善這些額外網頁導覽的網站體驗核心指標。

對推測規則執行偵錯可能很棘手。預先算繪的頁面尤其如此，因為這些頁面是在獨立的算繪器中算繪，有點像是隱藏的背景分頁，會在啟動時取代目前的分頁。因此，您不一定能使用一般的開發人員工具選項來偵錯問題。

Chrome 團隊一直致力於提升開發人員工具對推測規則偵錯的支援。本文將說明如何使用這些工具瞭解網頁的推測規則、規則可能無法運作的原因，以及開發人員何時可以使用較熟悉的開發人員工具選項，何時則不適用。

「前」字詞的說明

有許多「前」字詞容易造成混淆，因此我們先從這些字詞的說明開始：

預先擷取：預先擷取資源或文件，以提升日後效能。這篇文章將說明如何使用 Speculation Rules API 預先擷取文件，而非類似但較舊的 <link rel="prefetch"> 選項 (通常用於預先擷取子資源)。
預先算繪：這比預先擷取更進一步，會實際算繪整個網頁，就像使用者已前往該網頁一樣，但會將網頁保留在隱藏的背景算繪程序中，以便使用者實際前往時使用。再次提醒，本文著重於較新的 Speculation Rules API 版本，而非舊版 <link rel="prerender"> 選項 (不再執行完整預先算繪)。
推測性導覽：推測規則觸發的新預先擷取和預先算繪選項的統稱。
預先載入：這個詞彙的含意過於廣泛，可指稱多種技術和程序，包括 <link rel="preload">、預先載入掃描器和服務工作人員導覽預先載入。本文不會涵蓋這些項目，但會納入這個詞彙，以便清楚區分這些項目與「推測性導覽」一詞。

「`prefetch`」的推測規則

推測規則可用於預先擷取下一個導覽的檔案。舉例來說，在網頁中插入下列 JSON 時，系統會預先擷取 next.html 和 next2.html：

<script type="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"],
        "tag": "rule-set-tag-1"
      }
    ]
  }
</script>

相較於舊版 <link rel="prefetch"> 語法，使用導覽預先擷取的推測規則有幾個優點，例如 API 更具表現力，且結果會儲存在記憶體快取中，而非 HTTP 磁碟快取。

對 `prefetch` 推測規則執行偵錯

由推測規則觸發的預先擷取作業，會以與其他擷取作業相同的方式顯示在「網路」面板中：

以紅色醒目顯示的兩個要求是預先擷取的資源，如「類型」欄所示。這些資源會以 Lowest 優先順序擷取，因為這些資源適用於日後的瀏覽作業，而 Chrome 會優先處理目前網頁的資源。

點選任一行也會顯示 Sec-Purpose: prefetch HTTP 標頭，伺服器端就是透過這個標頭識別這些要求：

Chrome 開發人員工具預先擷取標頭，並將 Sec-Purpose 設為預先擷取 — Chrome 開發人員工具預先擷取標頭，且 Sec-Purpose 設為預先擷取

使用「推測載入」分頁偵錯 `prefetch`

Chrome 開發人員工具的「Application」面板已新增「Speculative loads」部分 (位於「Background services」部分下方)，有助於偵錯推測規則：

重點：推測載入分頁用於處理推測規則的預先擷取和預先算繪 (統稱為「推測導覽」)。這些分頁無法用於偵錯使用 <link rel="preload"> 的子資源預先載入、使用 <link rel="prefetch"> 的子資源預先擷取，以及較舊的 <link rel="prerender"> 無狀態預先擷取。

這個部分提供三個分頁：

推測載入：列出目前網頁的預先算繪狀態。
「規則」：列出目前頁面上的所有規則集，指定為網址或規則代碼 (如有)。
推測：列出規則集中的所有預先擷取和預先算繪網址。

上一個螢幕截圖顯示「Speculations」分頁，我們可以發現這個範例網頁有一組推測規則，可預先擷取 3 個網頁。其中兩項預先擷取作業成功，一項失敗。按一下「規則集」旁的圖示，即可前往「元素」面板中的規則集來源。或者，點選「狀態」連結，即可前往「推測」分頁，並篩選出該規則集。

「推測」分頁會列出所有目標網址，以及動作 (預先擷取或預先算繪)、所屬規則集 (網頁上可能有多個規則集)，以及每項推測的狀態：

Chrome 開發人員工具的「Speculations」分頁，顯示預先擷取的網址及其狀態 — Chrome 開發人員工具的「推測」分頁，顯示預先擷取的網址及其狀態

網址上方有一個下拉式選單，可用來顯示所有規則集的網址，或只顯示特定規則集的網址。下方會列出所有網址。點選網址可查看更詳細的資訊。

從這張螢幕截圖中，我們可以看到 next3.html 網頁的失敗原因 (該網頁不存在，因此傳回 404，也就是非 2xx 的 HTTP 狀態碼)。

「摘要」分頁的「推測載入」部分會顯示「這個頁面的推測載入狀態」報表，說明這個網頁是否使用預先擷取或預先算繪功能。

如果網頁已預先擷取，當您前往該網頁時，應該會看到成功訊息：

Chrome 開發人員工具的「推測載入」分頁，顯示預先擷取作業成功 — Chrome 開發人員工具的「推測載入」分頁，顯示預先擷取成功

無與倫比的推測

如果網頁含有推測規則，但瀏覽作業並未導致系統使用預先擷取或預先算繪內容，分頁的額外部分就會顯示更多詳細資料，說明網址為何與任何推測網址都不相符。這有助於找出推測規則中的錯字。

Chrome 開發人員工具的「推測載入」分頁，顯示目前的網址與前一頁推測規則中的任何網址都不相符 — 開發人員工具會醒目顯示不相符的網址

舉例來說，我們在這裡前往 next4.html，但只有 next.html、next2.html 或 next3.html 是預先擷取，因此我們可以看到這與任何一項規則都不完全相符。

「推測載入」分頁非常適合用來偵錯推測規則本身，以及找出 JSON 中的任何語法錯誤。

至於預先擷取本身，您可能更熟悉「網路」面板。如需預先擷取失敗的範例，請參閱以下預先擷取的 404 錯誤：

Chrome 開發人員工具的「網路」面板顯示預先擷取失敗 — Chrome 開發人員工具的「網路」面板，顯示預先擷取失敗

不過，推測載入分頁在預先算繪推測規則時會更加實用，這部分會在下節說明。

「`prerender`」的推測規則

預先算繪推測規則的語法與預先擷取推測規則相同。例如：

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"],
        "tag": "rule-set-tag-1"
      }
    ]
  }
</script>

這組規則會觸發指定網頁的完整載入和算繪作業 (須遵守特定限制)。這樣做可提供即時載入體驗，但會產生額外的資源費用。

不過，與預先擷取不同的是，這些資源不會顯示在「網路」面板中，因為這些資源是在 Chrome 的獨立算繪程序中擷取及算繪。因此，推測性載入分頁在偵錯預先算繪推測規則時就更顯重要。

使用「推測載入」分頁偵錯 `prerender`

您可以使用相同的「推測載入」畫面，瞭解預先算繪推測規則，如以下類似的示範網頁所示，該網頁會嘗試預先算繪，而非預先擷取三個網頁：

Chrome 開發人員工具的推測載入分頁，顯示網頁的預先算繪推測規則 — Chrome 開發人員工具的推測載入分頁，適用於含有預先算繪推測規則的網頁

我們再次看到有三個網址中，有一個無法預先算繪，開發人員可以點選「2 個就緒，1 個失敗」連結，在「推測」分頁中取得每個網址的詳細資料。

Chrome 121 版已推出文件規則支援功能。這樣一來，瀏覽器就能從網頁上的同源連結中擷取這些資源，而不必列出特定網址集：

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": { "href_matches": "/not-safe-to-prerender/*"}}
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

這個範例會選取所有相同來源的連結，但開頭為 /not-safe-to-prerender 的連結除外，做為預先算繪候選項目。

此外，它也會將預先算繪 eagerness 設為 moderate，也就是說，當滑鼠游標懸停在連結上或點選連結時，系統會預先算繪導覽。

推測規則示範網站上也有類似的規則，而使用這個網站上的新「推測載入」部分，即可顯示這個新分頁的實用性，因為網頁上所有符合資格的網址都會列出：