如何在VS Code中调试通过ng build --watch构建并使用lite-server运行的Angular PWA应用

我完全懂你的困扰——用ng serve能轻松断点调试，却没法用上PWA的完整功能；换成ng build --watch加lite-server跑dist文件，又丢了VS Code的调试能力。其实问题核心在于source map的生成关联和调试配置的类型选择，下面一步步帮你搞定：

第一步：确保构建时生成Source Map #

前端调试必须依赖source map，它能把编译后的dist代码映射回你的原始TypeScript文件。先确认Angular的build配置开启了这个功能：

1. 打开项目根目录的angular.json
2. 找到projects -> [你的项目名] -> architect -> build -> configurations -> development
3. 确保sourceMap设为true（默认开发环境是开启的，但最好手动检查）：

"development": {
  "sourceMap": true,
  "optimization": false,
  "extractLicenses": false,
  "vendorChunk": true,
  "buildOptimizer": false
}

之后运行构建命令时加上环境参数，确保生成source map：

ng build --output-path dist --watch --configuration development

这时你会在dist/[你的项目名]目录下看到.map后缀的文件，这是调试的关键。

第二步：配置VS Code的Chrome前端调试 #

你之前用的是node类型的调试配置，这是给Node.js后端代码用的，但Angular是前端代码，得用Chrome调试器。修改.vscode/launch.json，添加以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Angular PWA (lite-server)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/dist/[你的项目名]", // 替换成实际的项目子文件夹
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome-user-data",
      "runtimeArgs": [
        "--disable-web-security" // 可选，解决开发时的跨域问题
      ]
    }
  ]
}

注意：webRoot必须指向dist下的项目子文件夹（比如你的项目叫my-pwa，那就是${workspaceFolder}/dist/my-pwa），不然VS Code找不到source map对应的原始文件。

第三步：启动构建和服务器进程 #

你需要同时运行两个进程：一个监听代码变化自动构建，另一个用lite-server托管dist文件。可以用VS Code的多终端窗口分开运行，也可以简化到package.json的scripts里：

在package.json中添加：

"scripts": {
  "build:watch": "ng build --output-path dist --watch --configuration development",
  "serve:lite": "lite-server --baseDir=dist/[你的项目名]"
}

然后：

1. 打开第一个终端，运行npm run build:watch，等待第一次构建完成
2. 打开第二个终端，运行npm run serve:lite，确认lite-server在localhost:3000启动

第四步：启动调试并验证断点 #

在VS Code中打开你要调试的TypeScript文件，设置断点（点击代码行号左侧），然后在调试面板选择Debug Angular PWA (lite-server)配置，点击启动按钮。

Chrome会自动打开localhost:3000，当代码执行到你设置的断点时，VS Code就会暂停，你可以查看变量、单步执行等，完全和用ng serve时的调试体验一致，同时还能享受到PWA的完整功能。

额外注意事项 #

• 如果断点没命中，先检查dist目录下是否有.map文件，再确认launch.json里的webRoot路径是否正确
• 若遇到source map加载错误，可以在VS Code的调试控制台查看具体提示，调整webRoot或检查构建配置
• PWA的Service Worker仅在HTTPS或localhost环境下生效，lite-server的localhost:3000完全符合要求，不用担心功能受限

备注：内容来源于stack exchange，提问作者Konrad