使用 intellij Ultimate 调试 Angular cli 项目答案

【问题标题】：Debug angular cli project with intellij ultimate使用 intellij Ultimate 调试 Angular cli 项目
【发布时间】：2018-07-23 18:07:13
【问题描述】：

如何从 Intellij utlimate 调试 Angular 项目？我关注了this tutorial，但没有任何结果。我错过了什么？我用：
- 角 CLI：1.6.8 - 节点：6.10.0 - 操作系统：win32 x64 - 角度：5.2.4 - 打字稿：2.4.2 - 网络包：3.10.0 和 Intellij 2017.3.4。

My configuration。还尝试过： specific mapping.

我使用 ng serve 运行 Angular 项目（也尝试过 ng serve --sourcemaps=true）。同样在 tsconfig.json 中将 sourceMap 设置为 true。来自 chrome 调试器的文件结构：structure

【问题讨论】：

你用什么IDEA版本？当使用使用 New | 创建的默认 Angular cli 应用程序时，您可以重新创建问题吗？项目 |静态网页 | Angular CLI?
默认工作。我已经从头开始重新编写了 Angular 应用程序并复制了 src 文件并且它正在工作。
在 IDE 中调试代码而不是在 chrome 开发工具中调试有什么优势？

标签： javascript angular debugging intellij-idea angular-cli

【解决方案1】：

我正在运行 IntelliJ Ultimate。假设您的 Angular 应用程序已经能够在您的系统上运行，并且您拥有所需的插件，这相当容易，因为我今天早上刚开始工作。

添加 JavaScript 调试功能。运行 -> 编辑配置... 点击 + 选择 JavaScript 调试给它起个名字 JS Dbug 设置应用程序运行的路径，例如http://localhost:4200/

保存

在您的代码中设置一个断点，您知道该断点会在应用启动时触发

使用“npm start”启动您的应用程序一旦应用程序运行点击在调试模式下运行你的 JS Dbug

在浏览器中加载您的应用程序，它应该可以达到目的。

【讨论】：

Holy schamoly...我从事 UI 工作已经一年多了，而我现在才发现这个！？我觉得我在这里失去了几个月的生命。

【解决方案2】：

在我的例子中（对于 Angular 6），这是一个缺少的配置布尔值“evalSourceMap”：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "evalSourceMap": false
}

【讨论】：