對背景服務進行偵錯

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome 開發人員工具的「背景服務」部分包含 JavaScript API 的工具，可讓網站在使用者未開啟網站時，也能傳送及接收更新。背景服務的功能與背景程序相似。

您可以使用「背景服務」專區偵錯下列背景服務：

Chrome 開發人員工具可記錄擷取、同步處理和通知事件三天，即使未開啟開發人員工具也一樣。這有助於確保事件能如預期傳送及接收。

除了背景服務事件之外，開發人員工具還可執行以下操作：

背景擷取

Background Fetch API 可讓服務工作者以背景服務的形式，可靠地下載電影或 Podcast 等大型資源。如要記錄背景擷取事件 (即使未開啟開發人員工具也一樣)，請按照下列步驟操作：

  1. 例如，在這個示範頁面上開啟開發人員工具。

  2. 依序前往「應用程式」 >「背景服務」 >「背景擷取」，然後按一下 錄製。「記錄」。

    「Background fetch」窗格。

  3. 在示範頁面上，按一下「將素材資源儲存在本機」。這會觸發某些背景擷取活動。開發人員工具會將事件記錄到資料表。

    「Background fetch」窗格中的事件記錄。

  4. 點選事件即可在表格下方的空間中查看詳細資料。

  5. 您可以關閉開發人員工具，讓錄製功能繼續執行最多三天。如要停止錄影，請按一下 停止。「停止」。

背景同步處理

Background Sync API 可讓離線的服務工作者在重新建立可靠的網際網路連線後，將資料傳送至伺服器。如要記錄背景同步處理事件 (即使未開啟開發人員工具也一樣)，請按照下列步驟操作：

  1. 例如，在這個示範頁面上開啟開發人員工具。

  2. 依序前往「應用程式」 >「背景服務」 >「背景同步」，然後按一下 錄製。「記錄」。

    「背景同步」窗格。

  3. 在示範頁面中，按一下「註冊背景同步」來註冊相應的服務工作者，然後在系統提示時按一下「允許」。

    Service Worker 註冊是背景同步活動。開發人員工具會將事件記錄到資料表。

    背景同步處理窗格中的事件記錄。

  4. 點選事件即可在表格下方的空間中查看詳細資料。

  5. 您可以關閉開發人員工具，讓錄製功能繼續執行最多三天。如要停止錄影，請按一下 停止。「停止」。

(實驗功能) 跳轉追蹤因應措施

Chrome 的跳轉追蹤因應措施實驗可讓您找出並刪除疑似使用跳轉追蹤技術進行跨網站追蹤的網站狀態。您可以手動強制追蹤緩解措施，並查看已刪除狀態的網站清單。

如要強制採用追蹤因應措施，請按照下列步驟操作：

  1. 在 Chrome 中封鎖第三方 Cookie。依序前往並啟用 三點圖示選單。 >「設定」 > 。「隱私權和安全性」 >「Cookie 和其他網站資料」 > 已選取圓形按鈕。「封鎖第三方 Cookie」。
  2. 在 chrome://flags 中，將「跳轉追蹤因應措施」實驗設為「啟用並刪除」。
  3. 例如，在示範頁面上開啟「DevTools」，然後依序前往「Application」 >「Background services」 >「Bounce tracking mitigations」。
  4. 在示範頁面上，按一下跳出連結，然後等待 (10 秒) 讓 Chrome 記錄跳出事件。「Issues」分頁會發出警告，提醒您即將刪除狀態。
  5. 按一下「強制執行」即可立即刪除狀態。

跳轉追蹤因應措施列出狀態刪除作業。

通知

服務工作者收到伺服器傳送的推播訊息後，會使用 Notifications API 向使用者顯示資料。如要記錄三天的通知，即使未開啟開發人員工具也沒問題：

  1. 例如，在這個示範頁面上開啟開發人員工具。

  2. 依序前往「應用程式」 >「背景服務」 >「通知」，然後按一下 錄製。「記錄」。

    「通知」窗格。

  3. 在示範頁面中，按一下「安排通知」和「允許」(系統會顯示提示訊息)。

  4. 等待通知顯示。開發人員工具會將通知事件記錄到表格。

    通知窗格中的事件記錄。

  5. 點選事件即可在表格下方的空間中查看詳細資料。

  6. 您可以關閉開發人員工具，讓錄製功能繼續執行最多三天。如要停止錄影，請按一下 停止。「停止」。

推測載入

推測載入可根據您定義的推測規則，以近乎即時的速度載入網頁。這可讓網站預先載入及預先轉譯多數導向的網頁。

預先擷取會提前擷取資源，而預先算繪則會更進一步，在隱藏的背景轉譯器程序中算繪整個網頁。

您可以在「Application」 >「Background services」 >「Speculative loads」部分中對投機負載進行偵錯。這個部分包含三個檢視畫面：

  • 推測載入。包含目前網頁的推測狀態、目前網址、目前網頁嘗試推測載入的網頁，以及這些網頁的狀態。
  • 規則。包含「Elements」面板中目前頁面的規則集，以及推測的整體狀態。
  • 推測：包含一張表格，其中包含有關預測載入嘗試和其狀態的資訊。如果嘗試失敗，您可以點選表格中的項目，查看詳細資訊和失敗原因。

請嘗試在這個示範頁面上對推測載入進行偵錯：

  1. 開啟頁面上的「DevTools」，然後依序前往「Application」 >「Background services」 >「Speculative loads」。如果您沒有看到任何由頁面啟動的推測載入作業，請重新載入頁面。

    由這個頁面推測載入的網址，其中兩個成功，一個失敗。

  2. 示範的起始頁面會預先算繪兩個網頁，但無法預先算繪其中一個網頁。按一下「查看所有推測」。

  3. 在「推測」中，選取狀態為「失敗」的推測，即可查看底部「失敗原因」部分的詳細資訊。

    所選的失敗推測。

    在這種情況下，由於網站上沒有 /next3.html 頁面，因此預先算繪作業失敗。

  4. 開啟「規則」部分，然後點選「狀態」，即可在底部查看規則組合。按一下「Rule set」連結，即可前往「Elements」面板，並查看推測規則的定義位置。

    「規則」部分，其中包含規則集的連結。

如需更詳細的操作說明，請參閱「偵錯推測規則」。

推送訊息

如要向使用者顯示推播通知，服務工作者必須先使用 Push Message API 接收伺服器的資料。當服務工作者準備好顯示通知時，會使用 Notifications API。如要記錄推播訊息三天，即使未開啟開發人員工具也一樣：

  1. 例如，在這個示範頁面上開啟開發人員工具。

  2. 依序前往「應用程式」 >「背景服務」 >「推播訊息」，然後按一下 錄製。「記錄」。

    「推送訊息」窗格。

  3. 在示範頁面中切換「啟用推播通知」，然後在系統提示時按一下「允許」，輸入訊息並傳送。開發人員工具記錄會將推送通知事件傳送至資料表。

    「推播訊息」窗格中的事件記錄。

  4. 點選事件即可在表格下方的空間中查看詳細資料。

  5. 您可以關閉開發人員工具，讓錄製功能繼續執行最多三天。如要停止錄影，請按一下 停止。「停止」。

Reporting API

有些錯誤只會在正式環境中發生。您不會在本機或開發期間看到這些問題，因為實際使用者、網路和裝置會影響遊戲。

舉例來說，假設您的新網站需要使用 document.write() 載入關鍵指令碼的第三方軟體。世界各地的新使用者會開啟您的網站，但他們的連線速度可能比您測試時慢。您可能不知道，當網路速度緩慢時，Chrome 會介入 document.write()，導致網站開始發生問題。或者，您也可以留意程式碼集可能使用的已淘汰或即將淘汰的 API。

Reporting API 可協助您監控已淘汰的 API 呼叫、網頁的安全違規等。您可以按照「使用 Reporting API 監控網路應用程式」一文的說明設定報表。

如要查看網頁產生的報表，請按照下列步驟操作：

  1. 前往 chrome://flags/#enable-experimental-web-platform-features，將「Experimental Web Platform features」設為「Enabled」，然後重新啟動 Chrome。

  2. 開啟 DevTools，然後依序前往「Application」 >「Background services」 >「Reporting API」。舉例來說，您可以查看這個示範頁面上的報表。

    Reporting API 中列出的報表

「Reporting API」分頁分為三個部分：

  • 「報表」表格，其中包含每份報表的下列資訊：
    • 產生報表的網址
    • 違規類型
    • 回報狀態
    • Destination 端點
    • 產生時間時間戳記
    • 回報主體
  • 「報表主體」預覽部分。如要預覽報表內文，請在報表表格中點選報表。
  • 「Endpoints」部分，其中概略說明 Reporting-Endpoints 標頭中設定的所有端點。

報表狀態

「狀態」欄會顯示 Chrome 是否已成功傳送報告、即將傳送或傳送失敗。

狀態 說明
Success 瀏覽器已傳送報表，端點則以成功代碼 (200 或其他成功回應代碼 2xx) 回覆。
Pending 瀏覽器正在嘗試傳送報告。
Queued 報表已產生，但瀏覽器尚未嘗試傳送。報表會以 Queued 的形式顯示，但只有在下列兩種情況下才會出現：
  • 這份報告是新的，瀏覽器會先等待更多報告傳送過來，再嘗試傳送。
  • 這份報表並非新報表，瀏覽器已嘗試傳送這份報表，但失敗，因此正在等待重新嘗試。
MarkedForRemoval 重試一段時間後 (Queued)，瀏覽器會停止嘗試傳送報表，並很快從要傳送的報表清單中移除報表。

無論報表是否成功傳送，系統都會在一段時間後移除報表。