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

Question

我正在使用Visual Studio Code中的Chrome Debugger插件来调试Angular应用程序。升级到使用angular/[email protected]后，我们再也无法在调试时在VS Code中的打字稿代码中点击断点。如果我们回滚到angular/[email protected]，断点会再次开始工作。

这是我的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

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

Answer 1

对于遇到这种情况的人来说，修复是修改你的launch.json sourceMapPathOverrides，如下所示：

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

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

答案被发现here。

Answer 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设置一些其他值。

Answer 3

是的，这里也是一样的。

有时候我可以用一些困难达到我想要的断点（问题似乎是源图，但调试器仍然有用）。

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

最终我将@ angular / cli回滚到1.6.8并再次正常工作。

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

此外，@ angular / cli 1.7.1无法解决此问题。

Answer 4

同样在这里，回滚到1.6.8（并且角度为5.1.1）以使我的断点再次起作用。

Answer 5

设置sourceMapPathOverrides是不够的。

在我的例子中，index.html文件位于“/ src”中，而Angular组件位于“/ src / app”中。我使用@ angular / cli 1.7.4，vscode 1.22.2和chrome debugger 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设置为提供文件的目录。但要解决此问题，我必须将其设置为工作区根目录。