Debug background services

The Background Services section of Microsoft Edge DevTools is a collection of tools for the Web APIs that enable your website to send and receive data even when a user doesn't use your website, and enable the browser to report production problems to your server.

Microsoft Edge DevTools considers each of the following APIs to be a background service:

The Background Services section logs API events, even when you're not using DevTools, to help you make sure that events are being sent and received as expected.

Background Fetch

The Background Fetch API enables the service worker of a Progressive Web App to reliably download large resources, like movies or podcasts, as a background service. To log Background Fetch events for 3 days, even when DevTools isn't open:

  1. Open DevTools by right-clicking the webpage and selecting Inspect. Or by pressing Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS).

  2. In DevTools, on the main toolbar, select the Application tab. If that tab isn't visible, click the More tabs (More tabs icon.) button, or else the More Tools (More Tools icon.) button.

  3. On the left, in the Background Services section, select Background Fetch. The Background Fetch page opens.

    The Background Fetch panel.

  4. Click Record (Record.). After triggering some Background Fetch activity, DevTools logs the events to the table.

    A log of events in the Background Fetch panel.

  5. Click an event to view its details in the space below the table.

    View the details of an event in the Background Fetch pane.

Background Sync

The Background Sync API enables the offline service worker of a Progressive Web App to send data to a server once it has re-established a reliable internet connection. To log Background Sync events for 3 days, even when DevTools isn't open:

  1. Open DevTools by right-clicking the webpage and selecting Inspect. Or by pressing Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS).

  2. In DevTools, on the main toolbar, select the Application tab. If that tab isn't visible, click the More tabs (More tabs icon.) button, or else the More Tools (More Tools icon.) button.

  3. On the left, in the Background Services section, select Background Sync. The Background Sync page opens.

    The Background Sync pane.

  4. Click Record (Record.). After triggering some Background Sync activity, DevTools logs the events to the table.

    A log of events in the Background Sync pane.

  5. Select an event to view its details in the space below the table.

    View the details of an event in the Background Sync pane.

Notifications

After a service worker has received a Push Message from a server, the service worker uses the Notifications API to display the data to a user. To log Notifications for 3 days, even when DevTools isn't open:

  1. Open DevTools by right-clicking the webpage and selecting Inspect. Or by pressing Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS).

  2. In DevTools, on the main toolbar, select the Application tab. If that tab isn't visible, click the More tabs (More tabs icon.) button, or else the More Tools (More Tools icon.) button.

  3. On the left, in the Background Services section, select Notifications. The Notifications page opens.

    The Notifications pane.

  4. Click Record (Record.). After triggering some Notifications activity, DevTools logs the events to the table.

    A log of events in the Notifications pane.

  5. Click an event to view its details in the space below the table.

    View the details of an event in the Notifications pane.

Payment Handler

The Payment Handler API allows web applications to handle payment requests on behalf of users. To log the payment request and response events for 3 days, even when DevTools isn't open:

  1. Open DevTools by right-clicking the webpage and selecting Inspect. Or by pressing Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS).

  2. In DevTools, on the main toolbar, select the Application tab. If that tab isn't visible, click the More tabs (More tabs icon.) button, or else the More Tools (More Tools icon.) button.

  3. On the left, in the Background Services section, select Payment Handler. The Payment Handler page opens.

    The Payment Handler pane.

  4. Click Record (Record.). After triggering some payment requests, DevTools logs the events to the table.

    A log of events in the Payment Handler pane.

  5. Click an event to view its details in the space below the table.

    View the details of an event in the Payment Handler pane.

Periodic Background Sync

The Periodic Background Sync API enables the service worker of a Progressive Web App to retrieve data from a server, periodically, even when the website isn't opened. To learn more about the Periodic Background Sync API, see Use the Periodic Background Sync API to regularly get fresh content.

To log Periodic Background Sync events for 3 days, even when DevTools isn't open:

  1. Open DevTools by right-clicking the webpage and selecting Inspect. Or by pressing Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS).

  2. In DevTools, on the main toolbar, select the Application tab. If that tab isn't visible, click the More tabs (More tabs icon.) button, or else the More Tools (More Tools icon.) button.

  3. On the left, in the Background Services section, select Periodic Background Sync. The Periodic Background Sync page opens.

    The Periodic Background Sync pane.

  4. Click Record (Record.). After triggering some Periodic Background Sync activity, DevTools logs the events to the table.

    A log of events in the Periodic Background Sync pane.

Push Messages

To display a push notification to a user, the service worker of a Progressive Web App must first use the Push Message API to receive data from a server. When the service worker is ready to display the notification, it uses the Notifications API. To log Push Messages for 3 days, even when DevTools isn't open:

  1. Open DevTools by right-clicking the webpage and selecting Inspect. Or by pressing Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS).

  2. In DevTools, on the main toolbar, select the Application tab. If that tab isn't visible, click the More tabs (More tabs icon.) button, or else the More Tools (More Tools icon.) button.

  3. On the left, in the Background Services section, select Push Messaging. The Push Messaging page opens.

    Open the Push Messaging pane.

  4. Click Record (Record.). After triggering some Push Message activity, DevTools logs the events to the table.

    A log of events in the Push Messaging pane.

  5. Click an event to view the details in the space below the table.

    View the details of an event in the Push Messaging pane

Reporting API

The Reporting API enables web developers to receive reports of security violations, deprecated API calls, and others, from their production websites.

To see reports that have been sent by the browser using the Reporting API:

  1. Open DevTools by right-clicking the webpage and selecting Inspect. Or by pressing Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS).

  2. In DevTools, on the main toolbar, select the Application tab. If that tab isn't visible, click the More tabs (More tabs icon.) button, or else the More Tools (More Tools icon.) button.

  3. On the left, in the Background Services section, select Reporting API. The Reporting API page opens.

    Open the Reporting API pane.

  4. The Reporting API page displays the reports sent in the table at the top.

    List of reports in the Reporting API pane

  5. Click a report to view the details in the space below the table.

    View the details of a report in the Reporting API pane

  6. The Reporting API page also displays the list of reporting endpoints configured via the Reporting-Endpoints HTTP header in the table at the bottom.

    View the list of reporting endpoints in the Reporting API pane

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse). Creative Commons License. This work is licensed under a Creative Commons Attribution 4.0 International License.