intellij-idea - 如何使用 angular-cli webpack 调试 Angular 应用程序？

Question

我之前用的是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 和 Chrome 调试器使用 ng serve 调试我的 Angular 应用程序？

Answer 1

如何使用angular/cli调试

新的 angular/cli 版本使用 webpack，它不会像以前的 dist 那样将 ts 文件编译到本地目录(直到 beta 1.0.0-beta.10)。现在它使用一些类似内存的方法。

但您可以在 Chrome 开发者工具的“源代码”选项卡中找到 ts 文件。

---

(new) angular/cli@1.0.0-beta.26 及更新版本的解决方案

Notice: This solution was tested with version 1.0.0-beta.26 and 1.2.1

Notice: In this example I used port 5321 instead of 4200. Just use your port.

使用 Chrome 开发者工具调试

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

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

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

1. 将项目目录的远程 URL 路径设置为 webpack://。
2. 将 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 上的示例

Notice: on Windows you only need 3 slashes, on Mac you need 4 slashes after "webpack:"

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

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

玩得开心。