在VS Code中使用Firefox调试Angular 12应用启动及调试挂载失败问题

你当前的配置遗漏了两项核心配置，才会出现服务无法自动启动、调试器挂载失败的问题：

• 第一项：launch.json没有关联预启动任务，调试启动时不会自动执行npm start拉起Angular应用服务，直接访问localhost:4200自然会无法访问
• 第二项：webRoot路径配置错误，Angular应用的源码默认存放在根目录下的src文件夹内，你配置的${workspaceRoot}会导致调试器无法正确映射源码断点

修复后的完整配置 #

launch.json #

{
  "version": "0.2.0",
  "configurations": [
    { 
      "name": "npm start",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}/src",
      "firefoxExecutable": "/Applications/Firefox 2.app/Contents/MacOS/firefox",
      // 关联tasks里的npm start任务，调试启动前自动拉起服务
      "preLaunchTask": "npm: start",
      // 增加路径映射，确保源码断点正确匹配
      "pathMapping": {
        "/": "${workspaceFolder}/src"
      }
    }
  ]
}

tasks.json无需修改，保留原有配置即可 #

额外验证项 #

如果修改配置后仍有问题，按以下顺序排查：

1. 先手动执行npm start确认项目本身可以正常启动，排除依赖缺失、启动脚本错误的问题
2. 打开Firefox浏览器地址栏输入about:config，确认devtools.debugger.remote-enabled配置项为true，开启远程调试权限
3. 检查项目angular.json文件中，projects.你的项目名.architect.build.options.sourceMap配置为true，开启源码映射

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