Overview Open Chrome DevTools What's New In DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools What's New In DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

Debug background services

Published on

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.

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.