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

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

Barry Pollard

如上一篇文章所述，您可以使用推測規則來預先擷取及預先算繪下一個網頁導覽。這樣一來，網頁載入速度會大幅提升，甚至可達到即時載入的程度，大幅改善這些額外網頁導覽的網站體驗核心指標。

推測規則的偵錯作業可能相當棘手。這項問題尤其會發生在預先算繪的網頁，因為這類網頁會在個別轉譯器中算繪，類似於隱藏的背景分頁，在啟用時會取代目前分頁。因此，您無法隨時使用一般開發人員工具選項來偵錯問題。

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

「預先」條款的說明

許多「預先」術語都很容易混淆，因此我們先來解釋這些術語：

預先擷取：預先擷取資源或文件，以便改善日後的效能。本文將說明如何使用 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"]
      }
    ]
  }
</script>

使用推測規則為導覽預先載入提供服務，比起舊版 <link rel="prefetch"> 語法，有幾項優點，例如 API 更具表達力，且結果儲存在記憶體快取中，而非 HTTP 磁碟快取。

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

您可以在「Network」面板中查看預測規則觸發的預先擷取內容，方法與其他擷取內容相同：

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

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

點選任一資料列也會顯示 Sec-Purpose: prefetch HTTP 標頭，這可讓伺服器端識別這些要求：

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

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

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

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

這個部分提供三個分頁：

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

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

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

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

在網址上方，您可以使用下拉式選單，顯示所有規則集合的網址，或只顯示特定規則集合的網址。底下則列出所有網址。按一下網址即可查看詳細資訊。

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

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

對於預先擷取的網頁，您應該會在導覽至該網頁時看到成功訊息：

Chrome 開發人員工具的「Speculative loads」分頁，顯示預先載入成功 — Chrome 開發人員工具「推測載入」分頁顯示預先載入成功的結果

不相符的推測

如果網頁含有推測規則，但使用者從該網頁導覽時並未使用預先擷取或預先算繪功能，分頁中就會顯示額外部分，說明網址為何不符合任何推測網址。這有助於您找出推測規則中的錯字。

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

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

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

至於預先載入作業本身，您可能會比較熟悉「Network」面板。如需預先載入失敗的範例，請參閱預先載入的 404 錯誤：

Chrome 開發人員工具「網路」面板顯示預先載入失敗 — Chrome 開發人員工具「Network」面板顯示預先載入失敗

不過，推測載入分頁對於預先算繪推測規則更有幫助，我們會在下文中說明。

`prerender` 的推測規則

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

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

這個規則集會觸發指定網頁的完整載入和轉譯作業 (但須遵守特定限制)。這麼做雖然會增加資源成本，但可提供即時載入體驗。

不過，與預先擷取的內容不同，這些內容不會顯示在「Network」面板中，因為這些內容是在 Chrome 的獨立算繪程序中擷取及算繪。因此，「推測載入」分頁對於預先轉譯推測規則的偵錯作業來說更為重要。

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

同樣的預測載入畫面可用於預先算繪預測規則，如同試圖預先算繪而非預先擷取這三個頁面的類似示範頁面所示：

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

這裡再次顯示三個網址中，有一個網址無法預先顯示。開發人員可以點選「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，這表示在游標懸停或點選連結時，系統會預先算繪導覽。

推測規則示範網站上也有類似的規則，如果您使用該網站上的新「推測載入」部分，就能看到瀏覽器在網頁上找到的所有符合資格的網址，這也說明瞭這個新分頁的實用性：