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

對推測規則進行偵錯

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"]
      }
    ]
  }
</script>

相較於舊版的 <link rel="prefetch"> 語法，使用推測規則執行導覽預先擷取有一些優點，例如更生動的 API，以及儲存在記憶體快取 (而非 HTTP 磁碟快取) 的結果。

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

您可以在「網路」面板中查看推測規則觸發的預先擷取作業，就像其他擷取作業一樣：

以紅色醒目顯示的兩個要求是預先擷取的資源，會顯示在「Type」欄中。系統會根據 Lowest 的優先順序擷取這些項目，因為日後的瀏覽方式也是如此；Chrome 會優先處理目前網頁上的資源。

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

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

使用「Speculative load」分頁對 `prefetch` 進行偵錯

Chrome 開發人員工具的「應用程式」面板中新增了「推測載入」部分，位於「背景服務」部分下方，協助您對推測規則進行偵錯：

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

這個部分提供三個分頁：

推測載入：列出目前網頁的預先算繪狀態。
規則，會列出在目前網頁上找到的所有規則組合。
推測：列出規則集中所有預先擷取和預先算繪的網址。

「推測」分頁會顯示在先前的螢幕截圖中，在這個範例中，我們可以看到本範例網頁有一組預先擷取 3 個網頁的推測規則。其中兩個預先擷取成功，另一個失敗。您可以按一下「規則集」旁邊的圖示，前往「元素」面板中的規則組合的來源。您也可以按一下「狀態」連結，前往依該規則集進行篩選的「推測」分頁。

「推測」分頁會列出所有目標網址，以及所有目標網址適用的動作 (預先擷取或預先轉譯)、網址的來源規則組合 (因為網頁上可能有多個規則)，以及每項推測的狀態：

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

在此螢幕截圖中，我們可以看到 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"]
      }
    ]
  }
</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，表示在使用者將遊標懸停或點選連結時，系統會預先算繪導覽。

此外，這個示範網站也使用類似的規則。在這個網站上，全新的「推測載入」部分會列出這個新分頁的實用性，因為系統在頁面中找到的所有符合條件的網址時，都會列出這個新分頁的實用性：