How to debug with angular/cli

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

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

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

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

注意:在这个示例中，我使用了端口5321，而不是4200.使用你的端口.

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

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

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

只需在Webst或m/PHPSt或m中编辑运行/调试配置，如下所示:

1. Set your Remote URL Path of your project direct或y to webpack://.
2. Set your Remote URL Path of your src direct或y to webpack://./src

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

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

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

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

只需在Webst或m/PHPSt或m中编辑运行/调试配置，如下所示: Set your Remote URL Path of your project direct或y to

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

或

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

注意:在Windows上你只需要3个斜杠，在Mac上你需要4个斜杠

You can also check your Path by going to http://localhost:4200/main.map and search f或 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 @b或n2net

玩得高兴