Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

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

Barry Pollard

如上一篇文章所述，推測規則可用於預先擷取及預先算繪下一個網頁瀏覽。這樣一來，載入網頁速度會更快，甚至能立即載入，大幅改善這些額外網頁瀏覽的 Core Web Vitals。

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

Chrome 團隊一直努力強化開發人員工具對推測規則偵錯的支援。本文將介紹各種使用這些工具的方法，協助您瞭解網頁的推測規則、可能無法運作的原因，以及開發人員何時可以使用熟悉的開發人員工具選項，何時不適合使用。

「預先」相關字詞說明

許多「預先」一詞容易混淆，因此我們先說明這些詞彙：

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

`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` 推測規則進行偵錯

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

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

以紅色醒目顯示的兩項要求是預先擷取的資源，如「Type」欄所示。這些資源會以 Lowest 優先順序擷取，因為它們用於未來的導覽，而 Chrome 會優先處理目前網頁的資源。

按一下其中一列，也會顯示 Sec-Purpose: prefetch HTTP 標頭，這是在伺服器端識別這些要求的方式：

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

Chrome 開發人員工具的「Application」面板中，「背景服務」部分下方新增了「推測載入」部分，可協助偵錯推測規則：

Chrome 開發人員工具的推測載入分頁，顯示預先擷取規則 — Chrome 開發人員工具的推測載入功能分頁，顯示預先擷取規則

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

這個部分有三個分頁：

推測載入：列出目前頁面的預先算繪狀態。
規則：列出目前網頁上找到的所有規則集，並指定為網址或規則標記 (如有)。
Speculations：列出規則集中所有預先擷取和預先算繪的網址。

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

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

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

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

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

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

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

不相符的推測

如果從含有推測規則的網頁進行導覽，但未預先擷取或預先算繪，分頁會顯示額外部分，詳細說明網址與任何推測網址不符的原因。這有助於找出推測規則中的錯字。

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

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

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

至於預先擷取本身，「網路」面板可能是更熟悉的地方。在預先擷取失敗範例中，您可以在這裡看到預先擷取的 404 錯誤：

不過，「推測載入」分頁對於預先算繪推測規則來說更實用，我們會在下一節說明。

`prerender` 的推測規則

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

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

這組規則集會觸發完整載入和算繪指定網頁 (受特定限制)。這可提供即時載入體驗，但會耗用額外資源。

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

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

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

這裡再次看到三個網址中有一個預先算繪失敗，開發人員可以點選「2 Ready, 1 Failure」連結，在「Speculations」分頁中查看每個網址的詳細資料。

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，這表示當滑鼠游標懸停在連結上 (電腦版)、根據可視區域 (行動版) 或點選連結時，系統會預先算繪導覽。

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