React PWA在Chrome DevTools中重载失败的调试求助

Hey there! I’ve dealt with similar odd behavior in older Chrome versions (like your 72.0.3626.121) when debugging PWAs built with create-react-app. Let’s walk through how to properly debug your Service Worker, plus fix that frustrating issue where offline loading works until you open DevTools.

Basic Debugging Steps for Chrome 72 #

First, let’s get familiar with the Service Worker tools in Chrome DevTools:

• Open DevTools with F12 or Ctrl+Shift+I, then switch to the Application tab.
• On the left sidebar, expand Service Workers:
  • You’ll see your registered Service Worker here, with details like its status (active/waiting), scope, and script path.
  • Check Update on reload: This forces DevTools to fetch a fresh Service Worker every time you reload the page—critical for avoiding stale cached scripts that cause unexpected behavior.
  • Double-check Bypass for network: This is probably the culprit behind your offline failure! If this box is checked, Chrome skips the Service Worker entirely and hits the network directly. Uncheck it immediately when testing offline.
  • Click Inspect: This opens a separate DevTools window dedicated to your Service Worker. Here you can set breakpoints, view console logs, and monitor every fetch event it handles.

Fixing the "DevTools Breaks Offline Loading" Issue #

Since your PWA works offline without DevTools but fails when it’s open, let’s target the specific quirks in Chrome 72:

1. Unregister and re-register the Service Worker: Older Chrome versions sometimes hang onto stale Service Worker caches. In the Service Workers panel, click Unregister, then reload your page. This forces a fresh registration and activation—test offline again after this.
2. Inspect Service Worker logs: Use the Inspect window mentioned earlier, switch to the Console tab, and watch for errors when you reload offline. Common issues here include missing cached assets, failed install events, or script syntax errors that only surface in debug mode.
3. Verify cached assets: In the Application tab, expand Cache Storage to check if all your PWA’s critical files (HTML, JS, CSS, icons) are stored. create-react-app’s default Service Worker uses Workbox to cache these, but sometimes builds can skip assets—if something’s missing, double-check your build output.
4. Test offline both ways: Try stopping your serve server entirely instead of just checking the Offline box in DevTools. Sometimes the DevTools offline toggle interacts differently with Service Workers in older Chrome builds.

Extra Tips for create-react-app PWAs #

• Add console.log statements to your src/serviceWorker.js file (like in the install or fetch events) to track the Service Worker’s lifecycle. You’ll see these logs in the dedicated Inspect console.
• When building, always make sure you’ve switched serviceWorker.unregister() to serviceWorker.register() in src/index.js—you already did this, but it’s worth double-checking if issues persist.

内容的提问来源于stack exchange，提问作者Robert Hufsky