Debug Background Services with Microsoft Edge DevTools

The Background Services section of Microsoft Edge DevTools is a collection of tools for the JavaScript APIs that enables your website to send and receive updates even when a user does not have your website open.
A background service is functionally similar to a background process.
Microsoft Edge DevTools considers each of the following APIs to be a background service:

Microsoft Edge DevTools may log background service events for 3 days, even when DevTools is not open.
The background service events log may help you make sure that events are being sent and received as expected. You may also inspect the details of each event.

The Push Messaging pane

Background Fetch

The Background Fetch API enables a service worker to reliably download large resources, like movies or podcasts, as a background service. To log Background Fetch event for 3 days, even when DevTools is not open:

  1. Open DevTools.

  2. Open the Application tool.

  3. Open the Background Fetch panel.

    The Background Fetch panel

  4. Choose 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. Choose 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 an offline service worker 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 is not open:

  1. Open DevTools.

  2. Open the Application tool.

  3. Open the Background Sync pane.

    The Background Sync pane

  4. Choose 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. Choose 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 is not open:

  1. Open DevTools.

  2. Open the Application tool.

  3. Open the Notifications pane.

    The Notifications pane

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

    A log of events in the Notifications pane

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

    View the details of an event in the Notifications pane

Push Messages

To display a push notification to a user, a service worker 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 is not open:

  1. Open DevTools.

  2. Open the Application tool.

  3. Open the Push Messaging panel.

    Open the Push Messaging pane

  4. Choose 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. Choose an event to view the details in the space below the table.

    View the details of an event in the Push Messaging pane

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

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.