Angular PWA在VS Code+Chrome调试时出现Unbound breakpoint问题求解

可行解决方案 #

1. 调整launch.json配置 #

在原有两个调试配置中新增runtimeArgs、sourceMapPathOverrides参数，修改后完整配置如下：

{
    "name": "Launch PWA-Chrome",
    "request": "launch",
    "type": "pwa-chrome",
    "url": "http://localhost:4200/",
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true,
    "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/src/*",
        "webpack:///src/*": "${webRoot}/src/*",
        "webpack:///*": "*"
    },
    "runtimeArgs": [
        "--disable-application-cache",
        "--disable-background-sync",
        "--disable-pwa-install-prompt-for-testing",
        "--allow-file-access-from-files"
    ]
},
{
    "name": "Attach to Chrome",
    "port": 9222,
    "request": "attach",
    "type": "pwa-chrome",
    "url": "http://localhost:4200/",
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true,
    "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/src/*",
        "webpack:///src/*": "${webRoot}/src/*",
        "webpack:///*": "*"
    }
}

2. 开发环境禁用Service Worker注册 #

PWA的Service Worker会缓存静态资源导致调试器无法映射到本地源码，修改app.module.ts中的Service Worker注册逻辑，开发环境不加载Service Worker：

// 仅需调整enabled字段的判断逻辑，生产环境PWA功能不受影响
ServiceWorkerModule.register('ngsw-worker.js', {
  enabled: environment.production,
  registrationStrategy: 'registerWhenStable:30000'
}),

3. 调整angular.json开发配置 #

在项目的angular.json文件中，找到开发环境的构建配置，关闭PWA Service Worker生成，同时开启全量sourceMap：

"configurations": {
  "development": {
    "serviceWorker": false,
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "vendor": true
    },
    "optimization": false,
    "buildOptimizer": false
  }
}

修改后重启ng serve进程，确保配置生效。

4. 清空Chrome缓存的PWA资源 #

启动调试前执行以下操作：

• 打开Chrome访问chrome://serviceworker-internals/
• 找到http://localhost:4200对应的Service Worker条目，点击「Stop」后点击「Unregister」
• 访问http://localhost:4200，按F12打开开发者工具，选择「应用」标签页，点击「清除存储」->「清除站点数据」
• 关闭所有Chrome进程后再启动调试

内容的提问来源于stack exchange，提问作者T H