如上一篇文章所述，您可以使用推測規則來預先擷取及預先算繪下一個網頁導覽。這麼做可讓網頁載入速度大幅提升，甚至可即時載入，大幅改善這些額外網頁導覽的網站體驗核心指標。
推測規則的偵錯作業可能相當棘手。這項問題尤其會發生在預先算繪的網頁，因為這類網頁會在個別轉譯器中算繪，類似於隱藏的背景分頁，在啟用時會取代目前分頁。因此，您無法隨時使用一般開發人員工具選項來偵錯問題。
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」面板中查看預測規則觸發的預先擷取內容，方法與其他擷取內容相同：
以紅色標示的兩個要求是預先擷取的資源，如「Type」欄所示。這些資源會以 Lowest 優先順序擷取，因為它們是用於日後的導覽，而 Chrome 會優先處理目前網頁的資源。
點選任一資料列也會顯示 Sec-Purpose: prefetch HTTP 標頭，這可讓伺服器端識別這些要求：
使用「推測載入」分頁偵錯 prefetch
Chrome 開發人員工具的「Application」面板已在「Background services」部分下方新增「Speculative loads」部分，協助您偵錯推測規則：
這個部分提供三個分頁：
- 推測載入：列出目前網頁的預先算繪狀態。
- 規則：列出目前頁面中找到的所有規則集。
- 推測：列出規則集合中的所有預先擷取和預先轉譯的網址。
上方螢幕截圖顯示「Speculations」分頁，我們可以看到這個範例頁面有一組推測規則，用於預先載入 3 個網頁。其中兩個預先載入作業成功，另一個失敗。您可以按一下「規則集合」旁的圖示，前往「元素」面板查看規則集合的來源。或者，您也可以點選「狀態」連結，前往篩選出該規則集的「推測」分頁。
「Speculations」分頁會列出所有目標網址，以及動作 (預先擷取或預先算繪)、來源規則集 (網頁上可能有多個規則集) 和每個預測的狀態：
在網址上方，您可以使用下拉式選單，顯示所有規則集合的網址，或只顯示特定規則集合的網址。底下則列出所有網址。按一下網址即可查看詳細資訊。
在這個螢幕截圖中，我們可以看到 next3.html 頁面失敗的原因 (該頁面不存在，因此會傳回 404，這是非 2xx HTTP 狀態碼)。
「推測載入」摘要分頁會顯示「這個頁面的推測載入狀態」報表，說明這個網頁是否使用了預先載入或預先算繪功能。
對於預先擷取的網頁，您應該會在導覽至該網頁時看到成功訊息：
不相符的推測
如果網頁含有推測規則，但使用者從該網頁導覽時並未使用預先擷取或預先算繪功能，分頁中就會顯示額外區段，進一步說明網址為何不符合任何推測網址。這有助於您找出推測規則中的錯字。
舉例來說，我們在這裡導覽至 next4.html，但只有 next.html、next2.html 或 next3.html 是預先擷取，因此我們可以看到這項規則與這三項規則都不相符。
「Speculative loads」分頁非常適合用於偵錯推測規則本身，以及找出 JSON 中的任何語法錯誤。
至於預先載入作業本身，您可能會比較熟悉「Network」面板。如需預先載入失敗的範例，請參閱預先載入的 404 錯誤：
不過，推測載入分頁對於預先算繪推測規則更有幫助，我們會在下文中說明。
prerender 的推測規則
預先算繪推測規則的語法與預先載入推測規則相同。例如：
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
這個規則集會觸發指定網頁的完整載入和轉譯作業 (但須遵守特定限制)。這麼做雖然會產生額外的資源成本，但可提供即時載入體驗。
不過，與預先擷取的內容不同，這些內容不會顯示在「Network」面板中，因為這些內容會在 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，這表示在游標懸停或點選連結時，系統會預先算繪導覽。
推測規則示範網站上也有類似的規則，如果您使用該網站上的新「推測載入」部分，就能看到瀏覽器在網頁上找到的所有符合資格的網址，這也說明瞭這個新分頁的實用性：
由於這些項目的預先算繪程序尚未開始，因此「狀態」為「未觸發」。不過，當我們將游標懸停在連結上時，會發現每個網址預先顯示時，狀態會有所變更：
Chrome 已設定預先顯示功能的限制，包括 moderate 急迫性最多可使用 2 次預先顯示功能，因此當滑鼠游標懸停在第 3 個連結上時，我們會看到該網址的失敗原因：
使用其他開發人員工具面板偵錯 prerender
與預先載入不同，已預先算繪的網頁不會顯示在「網路」面板等「開發人員工具」面板中的目前算繪程序中，因為這些網頁會在其專屬的幕後算繪器中算繪。
不過，現在可以透過右上角的下拉式選單，或在面板頂端選取網址並選取「檢查」，切換開發人員工具面板使用的轉譯器：
這個下拉式選單 (以及所選值) 也會在所有其他面板中共用，例如「Network」面板，您可以在該面板中看到所要求的網頁是預先算繪的網頁：
查看這些資源的 HTTP 標頭，我們可以看到這些標頭都會設定為 Sec-Purpose: prefetch;prerender 標頭：
或「Elements」面板，您可以在其中查看網頁內容，如以下螢幕截圖所示，我們可以看到預先算繪網頁的 <h1> 元素：
或者，您也可以透過控制台面板查看預先算繪網頁所產生的控制台記錄：
對預先算繪網頁上的推測規則執行偵錯
前幾節討論了如何在啟動預先算繪的頁面上偵錯預先算繪頁面。不過，預先算繪的網頁本身也可以提供偵錯資訊，方法是發出 Analytics 呼叫或記錄至控制台 (如前一個部分所述，可在控制台中查看)。
此外，當使用者前往已預先算繪的網頁時，系統會在「Speculative loads」分頁中顯示這項狀態，以及是否已成功預先算繪。如果無法預先算繪，系統會說明為何無法預先算繪：
此外，如同預先擷取內容，如果您從網頁導覽至推測規則不符合目前網頁的情況，系統會嘗試在「推測載入」分頁中顯示為何網址不符合上一個網頁推測規則中的網址：
結論
在本篇文章中，我們說明瞭開發人員可以透過哪些方式偵錯預先載入和預先算繪推測規則。我們團隊會持續開發推測規則工具，也歡迎開發人員提供其他有助於偵錯這個令人期待的新 API 的建議。如有任何功能要求或發現錯誤，我們鼓勵開發人員在 Chrome Issue Tracker 上提出問題。
特別銘謝
縮圖圖片來源：Unsplash 上的 Nubelson Fernandes。