Inspecting Service Workers in Safari via the Develop Menu

This article provides a straightforward guide on how web developers can inspect and debug Service Worker background scripts in the Safari web browser. It covers enabling the hidden Develop menu, locating active Service Workers, and utilizing Safari's Web Inspector to monitor background processes, network requests, and console logs effectively.

Enable the Develop Menu

Before you can inspect a Service Worker, you must enable Safari's developer tools, which are hidden by default.

  1. Open the Safari browser.
  2. Click on Safari in the top-left menu bar and select Settings (or Preferences on older macOS versions).
  3. Navigate to the Advanced tab.
  4. At the bottom of the window, check the box next to Show features for web developers (or Show Develop menu in menu bar).
  5. Close the settings window. You will now see the Develop menu in the top menu bar.

Locate and Inspect the Service Worker

Unlike standard web pages, Service Workers run in a separate background thread and require their own dedicated Web Inspector window.

  1. Navigate to the webpage or web application that utilizes the Service Worker you want to debug.
  2. Click on Develop in the top menu bar.
  3. Hover your cursor over the Service Workers submenu near the top of the dropdown list.
  4. A list of currently running Service Workers will appear, labeled by their origin domain. Click on the specific Service Worker you wish to inspect.

Debug the Background Script

Selecting the Service Worker from the Develop menu opens a specialized Safari Web Inspector window scoped entirely to that Service Worker's context. This window provides three primary tabs for debugging:

  • Console: View console.log() outputs, errors, and warnings generated specifically by the Service Worker script. You can also execute JavaScript directly within the Service Worker's global scope here.
  • Sources: View the actual Service Worker script file. You can click on line numbers to set breakpoints, allowing you to pause execution and step through install, activate, fetch, or push events in real time.
  • Network: Monitor network requests that originate from or are intercepted by the Service Worker, separate from the main webpage's network traffic.

Troubleshooting Missing Service Workers

Safari aggressively terminates idle Service Workers to save system resources. If you open the Develop > Service Workers menu and see "No Service Workers" despite having your web application open, the script has likely gone idle.

To wake the Service Worker and make it appear in the menu:

  1. Refresh the webpage associated with the Service Worker.
  2. Trigger a network request or an event on the page that forces the Service Worker to respond.
  3. Quickly open the Develop > Service Workers menu again to select the script before it goes back to sleep. Once the Web Inspector window is attached to the Service Worker, Safari will keep the worker alive as long as the inspector window remains open.