Angular CLI 1.7.0 和 Visual Studio Code - 无法设置断点答案

【问题标题】：Angular CLI 1.7.0 and Visual Studio Code - can't set breakpointsAngular CLI 1.7.0 和 Visual Studio Code - 无法设置断点
【发布时间】：2018-07-31 05:33:14
【问题描述】：

我正在使用 Visual Studio Code 中的 Chrome 调试器插件来调试 Angular 应用程序。升级为使用 angular/cli@1.7.0 后，我们在调试时无法再在 VS Code 中的 typescript 代码中命中断点。如果我们回滚到 angular/cli@1.6.7，断点又开始工作了。

这是我的 ng -v 输出：

Angular CLI: 1.7.0
Node: 9.2.0
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.5.3
webpack: 3.11.0

还有其他人遇到这种情况吗？

【问题讨论】：

有一个未解决的问题，请参阅github.com/angular/angular-cli/issues/9729

标签： visual-studio-code angular-cli breakpoints chrome-debugging

【解决方案1】：

对于遇到此问题的人，修复方法是修改您的 launch.json sourceMapPathOverrides，如下所示：

"sourceMapPathOverrides": { 
    "webpack:/*": "${webRoot}/*" 
}

这使用最新的 @angular/cli（版本 1.7.3）为我修复了它。

已找到答案here。

【讨论】：

【解决方案2】：

Angular CLI 7.2.2：

Webstorm/Intellij - 断点未命中，VSCode - 断点未验证/未命中，Chrome 调试器 - 断点完美命中。

解决方案： 在 angular.json 中将 evalSourceMap 设置为“false”。

这会触发 Angular CLI 在后台使用 Webpack 来生成原始源代码（“source-map”）的源映射，而不是生成的代码（“eval”）。 https://webpack.js.org/configuration/devtool

查看 node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js 下

您当然可以破解 browser.js 文件来为 devtool 设置一些其他值。

【讨论】：

您介意进一步解释一下如何破解 browser.js 吗？我正在尝试在 WebStorm 中进行调试，但没有遇到断点。
@webworm 在 angular.json 中也使用 evalSourceMap=false（在某些版本中是 angular-cli.json）？然后您必须在 Angular CLI 安装中找到 browser.js（对于 Angular CLI 7.2.2，它是：node_modules\angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\browser.js ) 并检查 devtool/sourcemap 是如何在那里设置的。在我发现 buildOptions 来自哪里之前，我只是在上面的示例中将“eval”更改为“source-map”。
@angular/cli 10.2, evalSourceMap 是不允许的属性

【解决方案3】：

是的，这里也一样。

有时我很难到达我想要的断点（问题似乎出在 sourcemap 上，但调试器仍然可以正常工作）。

我尝试在 VS-Code 调试器启动配置（“sourceMaps”和“trace”）中调整一些设置，但无济于事。

最终我将@angular/cli 回滚到 1.6.8，它又可以正常工作了。

编辑：忘了提一下，以防它有助于搜索此问题的人 - 开始调试时，断点从源文件中消失，并且其选项卡标记为“源映射中的只读内联内容”。

另外，@angular/cli 1.7.1 没有解决这个问题。

【讨论】：

【解决方案4】：

这里也一样，回滚到 1.6.8（和角度 5.1.1）让我的断点再次工作。

【讨论】：

【解决方案5】：

设置 sourceMapPathOverrides 是不够的。

在我的例子中，index.html 文件位于“/src”中，Angular 组件位于“/src/app”中。我使用@angular/cli 1.7.4、vscode 1.22.2 和 chrome 调试器 4.3.0。

我必须在 launch.json 中设置三个参数。

"sourceMapPathOverrides": { 
    "webpack:/*": "${webRoot}/*"
},
"webRoot": "${workspaceFolder}",
"sourceMaps": true,

sourceMaps 是可选的，但请确保它没有设置为 false。

必须为launch.json配置文件的每个配置设置：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Chrome DEBUG 172.22.44.49",
            ...

在 chrome 调试器sourcemaps documention 中，据说将 webRoot 设置为提供文件的目录。但要解决这个问题，我必须将其设置为工作区根目录。

【讨论】：

【解决方案6】：

如果您正在使用包含 1 个或多个项目的 WorkSpace..

为我工作：启动.json

"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "ng serve",
        "url": "http://localhost:4300",
        "webRoot": "${workspaceFolder}/ProjectName",
        "sourceMapPathOverrides": { 
            "webpack:/*": "${webRoot}/*" 
        }
    }
]

1- 启动项目 ng serve --port 4300

2- 开始调试

【讨论】：