Didn't make the #ChromeDevSummit this year? Catch all the content (and more!) in the Chrome Dev Summit 2019 playlist on our Chrome Developers YouTube Channel.

Debug Background Services With Chrome DevTools

The Background Services section of Chrome 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. Chrome DevTools considers each of the following APIs to be a background service:

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

Viewing the details of an event in the Push Messaging pane.
Figure 1. Viewing the details of an event in 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 panel.
  3. Open the Background Fetch pane.

    The Background Fetch pane.
    Figure 2. The Background Fetch pane.

  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 pane.
    Figure 3. A log of events in the Background Fetch pane.

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

    Viewing the details of an event in the Background Fetch pane.
    Figure 4. Viewing 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 panel.
  3. Open the Background Sync pane.

    The Background Sync pane.
    Figure 5. 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.
    Figure 6. A log of events in the Background Sync pane.

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

    Viewing the details of an event in the Background Sync pane.
    Figure 7. Viewing 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 panel.
  3. Open the Notifications pane.

    The Notifications pane.
    Figure 8. 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.
    Figure 9. A log of events in the Notifications pane.

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

    Viewing the details of an event in the Notifications pane.
    Figure 10. Viewing 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 panel.
  3. Open the Push Messaging pane.

    The Push Messaging pane.
    Figure 11. 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.
    Figure 12. A log of events in the Push Messaging pane.

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

    Viewing the details of an event in the Push Messaging pane.
    Figure 13. Viewing the details of an event in the Push Messaging pane.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.