如何使用angular-cli webpack调试角度app？ [英] How to debug angular app using angular-cli webpack?

问题描述

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

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

如何使用Webstorm调试我的角度应用程序Chrome调试器使用ng服务？

解决方案

如何使用angular / cli进行调试

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

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

---

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

注意：此解决方案已通过版本1.0.0-beta.26和1.2.1测试

注意：在本例中我使用了端口只需使用您的端口。

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

在运行ng服务（也用于npm start）时，您可以在Chrome开发者工具部分找到您的来源：webpack：//：

< a href =https://i.stack.imgur.com/C32XU.png =noreferrer>

使用JetBrains IDE调整角度/ cli的Angular 2应用

只需编辑Run / Debug Confi即可Webstorm / PHPStorm中的guration以下内容：

1. 将项目目录的远程URL路径设置为 webpack：// 。


2. 将src目录的远程URL路径设置为 webpack：//。/ src

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

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

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

或

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

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

您还可以通过转到

编辑：也许您需要将添加/ 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调试角度app？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！