共用方式為


除錯背景服務

Microsoft Edge DevTools 的 背景服務 區塊是一系列用於 Web API 的工具,這些 API 使您的網站即使在使用者未使用網站時也能傳送與接收資料,並讓瀏覽器能向伺服器回報生產問題。

Microsoft Edge DevTools 將以下每一個 API 視為背景服務:

背景服務區會記錄 API 事件,即使你沒有使用 DevTools,也能幫助你確保事件如預期般傳送和接收。

背景取物

背景擷取 API 讓 Progressive Web App 的服務工作者能可靠地下載大型資源,如電影或播客,作為背景服務。 要記錄背景擷取事件三天,即使 DevTools 沒有開啟:

  1. 透過右鍵點擊網頁並選擇 檢查來開啟 DevTools。 或者在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。

  2. 在 DevTools 主工具列,選擇 應用程式 標籤。如果該分頁看不到,請點擊 「更多分頁 」 (「更多分頁」圖示) 按鈕,或點擊 「更多工具 (更多工具圖示) 按鈕。

  3. 在左側的 背景服務 區塊,選擇 背景擷取。 背景 取物 頁面打開。

    背景取物面板

  4. 點擊 錄製 (錄製) 。 在觸發一些背景擷取活動後,DevTools 會將事件記錄到資料表。

    背景擷取面板中的事件日誌

  5. 點擊活動可於表格下方查看詳情。

    在背景擷取面板中查看事件細節

背景同步

背景同步 API 讓 Progressive Web App 的離線服務工作者在伺服器重新建立穩定網路連線後,能夠將資料傳送到伺服器。 即使開發者工具沒開啟,也要記錄三天的背景同步事件:

  1. 透過右鍵點擊網頁並選擇 檢查來開啟 DevTools。 或者在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。

  2. 在 DevTools 主工具列,選擇 應用程式 標籤。如果該分頁看不到,請點擊 「更多分頁 」 (「更多分頁」圖示) 按鈕,或點擊 「更多工具 (更多工具圖示) 按鈕。

  3. 在左側的 背景服務 區塊,選擇 背景同步。背景 同步 頁面開啟。

    背景同步窗格

  4. 點擊 錄製 (錄製) 。 觸發某些背景同步活動後,DevTools 會將事件記錄到資料表。

    背景同步窗格中的事件日誌

  5. 選擇一個活動以查看表格下方的詳細資料。

    在背景同步面板中查看事件細節

通知

服務 工作 者收到來自伺服器的 推送訊息 後,會使用 Notifications API 向使用者顯示資料。 即使 DevTools 沒開,也要記錄三天通知:

  1. 透過右鍵點擊網頁並選擇 檢查來開啟 DevTools。 或者在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。

  2. 在 DevTools 主工具列,選擇 應用程式 標籤。如果該分頁看不到,請點擊 「更多分頁 」 (「更多分頁」圖示) 按鈕,或點擊 「更多工具 (更多工具圖示) 按鈕。

  3. 在左側的 背景服務 區塊,選擇 通知。 通知 頁面打開

    通知面板

  4. 點擊 錄製 (錄製) 。 觸發某些通知活動後,DevTools 會將事件記錄到資料表。

    通知窗格中的事件日誌

  5. 點擊活動可於表格下方查看詳情。

    在通知欄目中查看事件細節

付款處理器

Payment Handler API 允許網頁應用程式代表使用者處理付款請求。 請參閱 MDN 的 付款處理 API

即使 DevTools 未開啟,也要記錄支付請求與回應事件三天:

  1. 右鍵點擊網頁,然後選擇 檢查。 DevTools 開啟。

    或者,在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。

  2. 在 DevTools 主工具列,選擇 應用程式 標籤。如果該分頁看不到,請點擊 「更多分頁 」 (「更多分頁」圖示) 按鈕,或點擊 「更多工具 (更多工具圖示) 按鈕。

  3. 在左側的 背景服務 區塊中,選擇 付款處理程式。 付款 處理 頁面打開。

    付款處理面板

  4. 點擊 錄製 (錄製) 。 在觸發一些付款請求後,DevTools 會將事件記錄到資料表。

    付款處理窗格中的事件日誌

  5. 點擊活動可於表格下方查看詳情。

    在支付處理器面板中查看事件細節

週期性背景同步

週期性背景同步 API 讓漸進式網頁應用程式的服務工作者能定期從伺服器擷取資料,即使網站尚未開啟。 請參考使用 Periodic Background Sync API 定期在 Synchronize 中取得新內容,並在背景更新 PWA

要記錄週期性背景同步事件三天,即使 DevTools 沒有開啟:

  1. 透過右鍵點擊網頁並選擇 檢查來開啟 DevTools。 或者在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。

  2. 在 DevTools 主工具列,選擇 應用程式 標籤。如果該分頁看不到,請點擊 「更多分頁 」 (「更多分頁」圖示) 按鈕,或點擊 「更多工具 (更多工具圖示) 按鈕。

  3. 在左側的 背景服務 區塊中,選擇 週期性背景同步。週期 性背景同步 頁面會打開。

    週期性背景同步窗格

  4. 點擊 錄製 (錄製) 。 在觸發某些週期性背景同步活動後,DevTools 會將事件記錄到資料表。

    週期性背景同步窗格中的事件日誌

推播訊息

要向使用者顯示推播通知,漸進式網頁應用的 服務工作 者必須先使用 Push Message API 從伺服器接收資料。 當服務工作者準備好顯示通知時,會使用 Notifications API。 即使 DevTools 沒開,也要記錄推播訊息三天:

  1. 透過右鍵點擊網頁並選擇 檢查來開啟 DevTools。 或者在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。

  2. 在 DevTools 主工具列,選擇 應用程式 標籤。如果該分頁看不到,請點擊 「更多分頁 」 (「更多分頁」圖示) 按鈕,或點擊 「更多工具 (更多工具圖示) 按鈕。

  3. 在左側的 背景服務 區塊中,選擇 推送訊息。 推 播訊息 頁面開啟。

    打開推送訊息窗格

  4. 點擊 錄製 (錄製) 。 觸發推播訊息活動後,DevTools 會將事件記錄到資料表。

    推送訊息窗格中的事件日誌

  5. 點擊活動以查看表格下方空間的詳細資訊。

    在推播訊息面板中查看活動細節

報告 API

報告 API 讓網頁開發者能從其生產網站接收安全違規、棄用 API 呼叫等報告。

要查看瀏覽器使用 Reporting API 發送的報告:

  1. 透過右鍵點擊網頁並選擇 檢查來開啟 DevTools。 或者在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。

  2. 在 DevTools 主工具列,選擇 應用程式 標籤。如果該分頁看不到,請點擊 「更多分頁 」 (「更多分頁」圖示) 按鈕,或點擊 「更多工具 (更多工具圖示) 按鈕。

  3. 在左側的 背景服務 區塊,選擇 「報告 API」。 檢 索 API 頁面打開。

    打開「報告 API 窗格」

  4. 報告 API 頁面會顯示上方表格中所傳送的報告。

    報告 API 面板中的報告列表

  5. 點擊報告可查看表格下方空間的詳細資訊。

    在「報告 API 窗格」中查看報告的詳細資訊

  6. 報告 API 頁面也會顯示底部表格中透過 Reporting-Endpoints HTTP 標頭設定的報告端點清單。

    在「報告 API 窗格」中查看報告端點清單

注意事項

本頁部分內容基於 Google 創作與 分享 的作品,並依 據創用CC 姓名標示 4.0 國際授權條款進行修改。 原始頁面 可在此找到 ,作者為 Kayce Basques。 創用CC授權 本作品採用 創用CC 姓名標示4.0國際授權條款授權。