【问题标题】：How to debug angular app using angular-cli webpack?如何使用 angular-cli webpack 调试 Angular 应用程序？
【发布时间】：2017-01-13 20:44:54
【问题描述】：

我之前使用 angular-cli@1.0.0-beta.10，现在我更新为 angular-cli@webpack beta.11。经过大量自定义更改后，我让它工作了。

唯一的问题是，现在我无法使用 webstorm 和 chrome 调试器调试我的 Angular 应用程序，因为我没有使用 ng serve 获取任何 ts 文件。使用 angular-cli@1.0.0-beta.10，使用 Jetbrains 插件调试我的应用程序非常容易。

如何使用 Webstorm 和使用 ng serve 的 Chrome 调试器调试我的 Angular 应用程序？

【问题讨论】：

查看此链接stackoverflow.com/questions/46714537/…

标签： intellij-idea angular typescript google-chrome-devtools angular-cli

【解决方案1】：

如何使用 angular/cli 进行调试

新的 angular/cli 版本使用 webpack，它不会将 ts 文件编译到像 dist 这样的本地目录（直到 beta 1.0.0-beta.10）。现在它使用了一些类似记忆的方法。

但你可以在 Chrome 开发者工具的“Sources”选项卡中找到 ts 文件。

（新）angular/cli@1.0.0-beta.26 及更新版本的解决方案

注意：此解决方案已使用版本 1.0.0-beta.26 和 1.2.1 进行了测试

注意：在此示例中，我使用端口 5321 而不是 4200。只需使用您的端口即可。

使用 Chrome 开发者工具进行调试

在运行 ng serve（也用于 npm start）时，您可以在 Chrome 开发者工具部分找到您的源代码：“webpack://”：

使用 JetBrains IDE 使用 angular/cli 调试 Angular 2 应用程序

只需将 Webstorm/PHPStorm 中的运行/调试配置编辑为以下内容：

将项目目录的远程 URL 路径设置为 webpack://.
将 src 目录的远程 URL 路径设置为 webpack://./src

（旧）angular-cli@1.0.0-beta.10 - .14 的解决方案

使用 Chrome 开发者工具进行调试

在运行 ng serve（也用于 npm start）时，您可以在 Chrome 开发者工具部分找到您的源代码：“webpack://”：

使用 JetBrains IDE 使用 angular-cli@webpack 调试 Angular 2 应用程序

只需将 Webstorm/PHPStorm 中的运行/调试配置编辑为以下内容：将项目目录的远程 URL 路径设置为

webpack:////Users/...FULL_PATH.. //在 Mac OSX 上

或

webpack:///C:/...FULL_PATH.. //Windows 上的示例

注意：在 Windows 上你只需要 3 个斜杠，在 Mac 上你需要 4 个斜杠在“webpack:”之后

您还可以通过转到http://localhost:4200/main.map 并搜索任何“.ts”文件来检查您的路径。您可以轻松复制此文件的路径并将其粘贴到您的 IDE 配置对话框中。

编辑：也许您还需要将添加“/src”的路径映射到您的 src 文件夹。谢谢@born2net

玩得开心。

【讨论】：

我发现的一个问题是，在使用带有 webpack 构建的 Chrome 进行调试的情况下，有时无法正确设置断点，可能是源映射搞砸了。这就是为什么我恢复使用 systemjs 构建进行开发（设置断点没有问题）
公平地说，你应该承认 angular-cli 的 webpack 构建仍处于 beta 阶段。我认为源映射的这个问题将在 angular-cli@webpack 的最终版本中得到改进。
公平点。我希望（希望！）源映射将被修复。否则 angular-cli 是一个很好的工具，我只希望它变得更好。
在 Windows 上，您应该在远程 URL 中使用三个斜杠而不是四个，例如 webpack:///C:/Users/...
不适用于 Angular CLI 7.2.2，解决方案是 stackoverflow.com/a/54883663/706012

【解决方案2】：

好的，让它工作，您需要同时映射 root 和 src。看这里：

希望它对某人有所帮助，

让我补充一点，有时调试器会错过你的断点，所以在你的断点之前添加 alert('foo') 或 ;debugger 代码。

发送

将添加和转换 jspm 项目到新的 cli Angular 2 厨房水槽：http://ng2.javascriptninja.io 和来源@https://github.com/born2net/ng2Boilerplate 问候，

肖恩

【讨论】：

你确定不把src文件夹映射到路径就不行吗？通常父文件夹应该映射到绝对路径，所有子文件夹都相对于父路径。
这两种映射在 windows 上似乎都是必需的。
这是最令人困惑的事情，但是是的，它有效。 angular-cli: 1.0.0-beta.24 node: 6.9.1 os: darwin x64
作为@Denko，第一次尝试:)，但请注意：仅在根项目中添加“远程 URL”就足够了。

【解决方案3】：

2017 年回答： angular-cli: 1.0.0-beta.26 node: 6.9.2 os: darwin x64

如果您对此有疑问，请转到调试器中的脚本选项卡，然后尝试根据您看到的内容调整 URL 映射。

其他答案都没有帮助我，因为我的 angular-cli 版本以不同的方式映射事物。

【讨论】：

【解决方案4】：

最后帮助我的是在webpack:/// 之后添加一个额外的/（正斜杠），这样就有 4 个而不是 3 个。默认情况下有 3 个正斜杠

remote URL 指向与左侧相同的父目录，但 webpack://// 架构除外。

您也不需要像通常建议的那样启用 TS 编译器。

MacOS
Angular-CLI 2.4.1
WebStorm 2016.3

【讨论】：

【解决方案5】：

您可以使用 Web 浏览器的开发工具扩展 Augury 来调试 Angular 应用程序。

这是您可以安装的链接：

https://augury.angular.io/

此工具在查看应用程序中的路由层次结构、模块和组件层次结构以及每个组件的依赖注入概述方面非常有用。

这是我的项目的注入图，说明了我的上述解释：

【讨论】：

Augury 不再维护，无法在当前浏览器和 Angular 版本中正常工作。

【解决方案6】：

请注意，上述解决方案不允许您在使用 IntelliJ 时在 Angular 组件的 html 文件中设置断点。您只能在 Chrome 中执行此操作。我不明白为什么这在 IntelliJ 中是不可能的。

【讨论】：