如何使用 angular-cli webpack 调试 angular 应用程序? [英] How to debug angular app using angular-cli webpack?

问题描述

我之前使用过 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 插件可以非常轻松地调试我的应用.

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

解决方案

如何使用 angular/cli 进行调试

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

但您可以在 Chrome 开发者工具的来源"选项卡中找到 ts 文件.

<小时>

(new) 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 中的运行/调试配置编辑为以下内容:

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 上的示例

<块引用>

注意:在 Windows 上你只需要 3 个斜线，在 Mac 上你需要 4 个斜线在webpack:"之后

您也可以通过转到

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

玩得开心.

I used angular-cli@1.0.0-beta.10 before and now I updated to angular-cli@webpack beta.11. After a lot of custom changes I got it to work.

The only thing is that now I can not debug my angular app using webstorm and chrome debugger because I don't get any ts files using ng serve. With angular-cli@1.0.0-beta.10 it was very easy to debug my app using the Jetbrains Plugin.

How can I debug my angular app with Webstorm and the Chrome Debugger using ng serve?

解决方案

How to debug with angular/cli

The new angular/cli version uses webpack which does not compile the ts files to an local directory like dist before (till beta 1.0.0-beta.10). Now it uses some memory like approach.

But you can find the ts Files in the Chrome Developer Tools in the "Sources" tab.

---

(new) Solution for angular/cli@1.0.0-beta.26 and newer

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.

Debugging with Chrome Developer Tools

While running ng serve (also used in npm start), you can find your sources in the Chrome Developer Tools section: "webpack://":

Debugging Angular 2 App with angular/cli using JetBrains IDE

Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following:

1. Set your Remote URL Path of your project directory to webpack://.
2. Set your Remote URL Path of your src directory to webpack://./src

---

(old) Solution for angular-cli@1.0.0-beta.10 - .14

Debugging with Chrome Developer Tools

While running ng serve (also used in npm start), you can find your sources in the Chrome Developer Tools section: "webpack://":

Debugging Angular 2 App with angular-cli@webpack using JetBrains IDE

Just edit your Run/Debug Configuration in Webstorm/PHPStorm to following: Set your Remote URL Path of your project directory to

webpack:////Users/...FULL_PATH.. //on Mac OSX

or

webpack:///C:/...FULL_PATH.. //example on Windows

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

You can also check your Path by going to http://localhost:4200/main.map and search for any ".ts" File. You can easily copy the path of this file and paste it to your IDE Configuration Dialog.

EDIT: Perhaps you need to map the path adding "/src" to your src folder too. Thanks @born2net

Have Fun.

这篇关于如何使用 angular-cli webpack 调试 angular 应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！