對背景服務進行偵錯

Sofia Emelianova
Sofia Emelianova

Chrome 開發人員工具的「背景服務」部分是 JavaScript API 的一系列工具,可讓網站傳送及接收更新,即便使用者並未開啟網站也沒問題。背景服務的運作方式與背景處理程序相似,

「背景服務」區段可讓您對下列背景服務進行偵錯:

即使開發人員工具未開啟,Chrome 開發人員工具仍可記錄擷取、同步處理和通知事件三天。這有助於確保系統可以正常傳送和接收事件。

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

背景擷取

Background Fetch API 可讓服務工作站穩定下載電影或 Podcast 等大型資源做為背景服務。如要在開發人員工具未開啟的情況下記錄三天的背景擷取事件,請按照下列步驟操作:

  1. 開啟開發人員工具 (例如這個示範頁面)。
  2. 依序前往「Application」 >「Background services」 >「背景擷取」,然後按一下 錄製。「錄製」

    背景擷取窗格。

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

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

  4. 點選事件即可在表格下方的聊天室中查看相關詳細資料。

  5. 您可以關閉開發人員工具,且錄製作業最多保留三天。如要停止錄製,請按一下「Stop」圖示 停止。

背景同步處理

Background Sync API 在重建穩定的網際網路連線後,讓離線的服務工作站將資料傳送至伺服器。即使未開啟開發人員工具,也想記錄三天的背景同步處理事件:

  1. 開啟開發人員工具 (例如這個示範頁面)。
  2. 依序前往「Application」 >「Background services」 >「Background sync」,然後按一下 錄製。「Record」

    背景同步處理窗格。

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

    服務工作處理程序註冊屬於背景同步處理活動。開發人員工具會將事件記錄至資料表。

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

  4. 點選事件即可在表格下方的聊天室中查看相關詳細資料。

  5. 您可以關閉開發人員工具,且錄製作業最多保留三天。如要停止錄製,請按一下「Stop」圖示 停止。

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

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

如何強制執行追蹤因應措施:

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

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

通知

Service Worker 收到伺服器傳送的推送訊息後,就會使用 Notifications API 向使用者顯示資料。即使開發人員工具未開啟,也可以將通知記錄三天:

  1. 開啟開發人員工具 (例如這個示範頁面)。
  2. 依序前往「Application」 >「Background services」 >「Notifications」,然後按一下 錄製。「Record」

    通知窗格。

  3. 在示範頁面上,當系統提示時依序按一下「Schedule 通知」和「Allow」

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

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

  5. 點選事件即可在表格下方的聊天室中查看相關詳細資料。

  6. 您可以關閉開發人員工具,且錄製作業最多保留三天。如要停止錄製,請按一下「Stop」圖示 停止。

推測載入項目

推測載入功能可根據您定義的推測規則,在近乎即時的網頁載入。如此一來,您的網站就能預先擷取及預先算繪大多數前往的網頁。

預先擷取功能會預先擷取資源,而預先算繪功能可比過往更進一步,並在隱藏的背景轉譯器程序內轉譯整個網頁。

如要對推測載入功能進行偵錯,請依序前往「應用程式」 >「背景服務」 >「推測載入」部分。這個部分包含三種檢視畫面:

  • 推測載入項目。包含目前網頁、目前網址、目前網頁嘗試載入推測的網頁,以及網頁狀態。
  • 規則:包含目前網頁的「元素」面板的規則組合,以及推測整體狀態。
  • 推測。含有推測載入嘗試及其狀態資訊的資料表。如果嘗試失敗,可以在表格中點選該動作,查看詳細資訊和失敗原因。

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

  1. 在網頁上開啟開發人員工具,然後依序前往「應用程式」 >「背景服務」 >「推測載入」。如果您無法查看該網頁啟動的任何推測載入項目,請重新載入頁面。

    根據這個網頁推測載入的網址,有兩個成功,一次失敗。

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

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

    所選的失敗推測。

    在這個案例中,由於網站上沒有 /next3.html 頁面,因此預先算繪失敗。

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

    「規則」部分以及「規則組合」連結。

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

推送訊息

如要向使用者顯示推播通知,服務工作站必須先使用 Push Messages API 從伺服器接收資料。Service Worker 已準備好顯示通知,就會使用 Notifications API。如要記錄三天的推送訊息 (在開發人員工具未開啟的情況下):

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

    「Push Messaging」窗格。

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

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

  4. 點選事件即可在表格下方的聊天室中查看相關詳細資料。

  5. 您可以關閉開發人員工具,且錄製作業最多保留三天。如要停止錄製,請按一下「Stop」圖示 停止。

Reporting API

某些錯誤只會在實際工作環境中發生。由於實際使用者、網路及裝置會改變遊戲,因此你不會在本機或開發期間看到這些應用程式。

舉例來說,假設您的新網站仰賴使用 document.write() 的第三方軟體載入重要指令碼。全球新使用者會開啟你的網站,但連線速度可能會比測試慢。由於 Chrome 會在速度緩慢的網路中乾擾 document.write(),因此你的網站會在您不知情的情況下開始運作。或者,請留意程式碼集可能正在使用的已淘汰或即將淘汰的 API。

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

如何查看依網頁產生的報表:

  1. 請前往 chrome://flags/#enable-experimental-web-platform-features 將「實驗性 Web Platform 功能」設為「已啟用」,然後重新啟動 Chrome。
  2. 開啟開發人員工具,然後前往「應用程式」 >「背景服務」 >「Reporting API」。舉例來說,您可以查看這個示範頁面的報表。

    Reporting API 中列出的報表

Reporting API 分頁分為三個部分:

  • 「Reports」表格會列出每份報表的相關資訊:
    • 產生報表的網址
    • 違規類型
    • 報表狀態
    • 目的地端點
    • 產生時間:時間戳記
    • 報告內文
  • 「報表主體」預覽部分。如要預覽報表內文,請按一下報表表格中的報表。
  • 「端點」區段提供 Reporting-Endpoints 標頭中設定的所有端點總覽。

報表狀態

「狀態」欄會顯示 Chrome 是否已成功傳送報告、即將傳送報告,還是無法傳送。

狀態 說明
Success 瀏覽器已傳送報表,且端點以成功代碼 (200 或其他成功回應代碼 2xx) 回覆。
Pending 瀏覽器正在嘗試傳送報表。
Queued 報表已產生,瀏覽器尚未嘗試傳送。下列兩種情況的報表會顯示為 Queued
  • 這類報告是全新功能,瀏覽器正在等待我們確認是否收到更多報表,然後再嘗試傳送。
  • 此報表並非新報表;瀏覽器嘗試傳送此報表但失敗,正在等待重試。
MarkedForRemoval 在重試一段時間 (Queued) 後,瀏覽器已停止嘗試傳送報表,很快就會從報表清單中移除要傳送的報表。

無論報表是否已成功傳送,我們很快就會移除。