如何让Visual Studio Code调试器找到AngularDart包文件？

我之前调试AngularDart时也碰到过一模一样的源映射路径问题，Chrome总是找错Dart文件的位置，给你几个亲测有效的解决办法：

• 调整launch.json的映射配置
  打开VS Code里的.vscode/launch.json，重点配置sourceMapPathOverrides，把Chrome调试器里的URL路径强制映射到本地项目的实际文件路径。比如你的情况，可以这么写：

  {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "AngularDart Debug",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/web",
        "sourceMapPathOverrides": {
          "http://localhost:8080/packages/*": "${workspaceFolder}/packages/*",
          "webpack:///packages/*": "${workspaceFolder}/packages/*"
        }
      }
    ]
  }
  

  你看Chrome调试器里输出的路径是/Users/jeffward/Projects/newton/web/packages/newton/src/routes.dart，但实际你的文件应该在/Users/jeffward/Projects/newton/packages/...，这个配置就是把错误的web/packages路径替换成正确的项目根目录下的packages文件夹。

• 确保服务启动时生成完整源映射
  启动项目时别用禁用源映射的参数，比如用webdev serve --debug或者直接pub serve（AngularDart旧版本），这些命令默认会生成正确的源映射，要是之前加了--no-source-maps一定要去掉。

• 清理缓存重置服务
  有时候旧的缓存会搞乱源映射，先停掉正在运行的webdev或pub服务，删掉项目根目录下的.dart_tool文件夹，然后重新启动服务，再重启VS Code的调试会话，大概率能解决缓存导致的路径问题。

• 临时手动修正源映射（应急用）
  如果上面的方法都没效果，可以临时找到生成的.ddc.js.map文件，修改里面的sources字段，把相对路径改成本地的绝对路径，不过这个方法每次构建后都要重新改，适合临时验证问题根源。

Chrome调试器.scripts的示例输出：
› http://localhost:8080/packages/newton/src/routes.ddc.js - routes.dart (/Users/jeffward/Projects/newton/web/packages/newton/src/routes.dart)

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