對背景服務進行偵錯

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Chrome 開發人員工具的「背景服務」部分是一組 JavaScript API 工具,可讓網站在使用者未開啟網站時傳送及接收更新。背景服務在功能上與背景程序類似。

「背景服務」部分可讓您偵錯下列背景服務:

Chrome 開發人員工具可以記錄擷取、同步及通知事件三天,即使開發人員工具未開啟也一樣。這有助於確保事件傳送和接收作業正常運作。

除了背景服務事件,開發人員工具還能:

背景擷取

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

  1. 在採用 Background Fetch API 的頁面上開啟開發人員工具
  2. 依序前往「Application」 >「Background services」 >「Background fetch」,然後按一下「Record」圖示 錄音。

    「背景擷取」窗格。

  3. 在網頁上觸發一些背景擷取活動。開發人員工具會將事件記錄到表格中。

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

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

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

背景同步處理

Background Sync API 可讓離線的服務工作人員在重新建立可靠的網際網路連線後,將資料傳送至伺服器。如要記錄背景同步事件三天,即使開發人員工具未開啟也一樣:

  1. 開啟開發人員工具,例如在這個示範頁面上。
  2. 依序前往「應用程式」 >「背景服務」 >「背景同步」,然後按一下「記錄」圖示 錄音。

    「背景同步處理」窗格。

  3. 在示範頁面中,按一下「Register background sync」註冊相應的 Service Worker,並在系統提示時按一下「Allow」

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

    「背景同步」窗格中的事件記錄。

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

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

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

Chrome 的跳轉追蹤因應措施實驗可讓您找出並刪除網站的狀態,這些網站似乎使用跳轉追蹤技術執行跨網站追蹤。您可以手動強制執行追蹤防護措施,並查看狀態已刪除的網站清單。

如要強制執行追蹤因應措施,請按照下列步驟操作:

  1. 在 Chrome 中封鎖第三方 Cookie。依序前往並啟用 三點選單。 >「設定」 > 。「隱私權和安全性」 >「Cookie 和其他網站資料」 > 已勾選圓形按鈕。「封鎖第三方 Cookie」
  2. chrome://flags 中,將「跳轉追蹤因應措施」實驗設為「啟用並刪除」
  3. 開啟開發人員工具,然後依序前往「應用程式」 >「背景服務」 >「跳出追蹤防護措施」
  4. 按一下跳轉連結,然後等待 (10 秒) Chrome 記錄跳轉。「問題」分頁會顯示即將刪除狀態的警告。
  5. 按一下「強制執行」即可立即刪除狀態。

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

通知

服務工作人員從伺服器收到 Push Message 後,會使用 Notifications API 向使用者顯示資料。如要記錄三天的通知,即使開發人員工具未開啟也沒問題,請按照下列步驟操作:

  1. 開啟開發人員工具
  2. 依序前往「應用程式」 >「背景服務」 >「通知」,然後按一下「記錄」圖示 錄音。

    「通知」窗格。

  3. 按一下「安排通知」,並在系統提示時點選「允許」

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

    「通知」窗格中的事件記錄。

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

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

推測載入

推測載入功能可根據您定義的推測規則,近乎即時地載入頁面。這樣一來,網站就能預先擷取及預先算繪大多數導向的網頁。

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

您可以在「Application」 >「Background services」 >「Speculative loads」部分中,偵錯推測載入。這個部分包含三種檢視畫面:

  • 推測載入。包含目前網頁、目前網址、目前網頁嘗試推測載入的網頁,以及這些網頁的推測狀態。
  • 規則。包含「元素」面板中目前頁面的規則集,以及推測的整體狀態。
  • 推測。內含表格,其中列出推測載入嘗試和狀態的相關資訊。如果嘗試失敗,您可以點選表格中的嘗試,查看詳細資訊和失敗原因。

請在這個預先算繪示範頁面上,嘗試偵錯推測載入:

  1. 在網頁上開啟開發人員工具,然後依序前往「Application」>「Background services」>「Speculative loads」。如果沒有看到頁面啟動的任何推測載入,請重新載入頁面。

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

  2. 試用版起始頁面會預先算繪兩個頁面,但無法預先算繪一個頁面。按一下「查看所有推測」

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

    選取失敗的推測。

    在本例中,預先算繪作業失敗,因為網站上沒有 /next3.html 頁面。

  4. 開啟「規則」部分,然後按一下「狀態」,即可查看底部的規則組合。按一下「規則集」連結,即可前往「元素」面板,並查看推測規則的定義位置。

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

如需更詳細的逐步說明,請參閱「偵錯推測規則」。

推送訊息

如要向使用者顯示推播通知,Service Worker 必須先使用 Push Message API 從伺服器接收資料,服務工作人員準備好顯示通知時,會使用 Notifications API。如要記錄推播訊息三天 (即使開發人員工具未開啟),請按照下列步驟操作:

  1. 開啟開發人員工具,例如在這個示範頁面上。
  2. 依序前往「Application」 >「Background services」 >「Push Messaging」,然後按一下「Record」圖示 錄音。

    「推送訊息」窗格。

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

    「Push Messaging」窗格中的事件記錄。

  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. 開啟開發人員工具,然後依序前往「應用程式」 >「背景服務」 >「Reporting API」

    Reporting API 中列出的報表

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

  • 「報表」表格,其中包含每份報表的下列資訊:
    • 導致產生報表的網址
    • 違規類型
    • 報告狀態
    • 目的地端點
    • 生成時間時間戳記
    • 檢舉內容
  • 「報表內文」預覽部分。如要預覽報表內容,請按一下報表表格中的報表。
  • 「端點」部分,其中包含 Reporting-Endpoints 標頭中設定的所有端點總覽。

報表狀態

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

狀態 說明
Success 瀏覽器已傳送報表,端點則回覆成功代碼 (200 或其他成功回應代碼 2xx)。
Pending 瀏覽器正在嘗試傳送報告。
Queued 報表已產生,但瀏覽器尚未嘗試傳送。在下列兩種情況下,報表會顯示為 Queued
  • 報告是新的,瀏覽器會等待是否還有其他報告送達,再嘗試傳送。
  • 這份報告並非新報告,瀏覽器已嘗試傳送這份報告,但失敗了,因此正在等待,之後會再次嘗試。
MarkedForRemoval 經過一段時間的重試 (Queued) 後,瀏覽器已停止嘗試傳送報告,並即將從待傳送報告清單中移除該報告。

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