调试WebStorm中创建的Angular应用程序

https://blog.jetbrains.com/webstorm/2017/[Angular CLI

](https://cli.angular.io/) 可以帮助我们
引入
一个新的

[Angular

](https://angular.io/)应用程序，并准备使用TypeScript和Webpack配置。
在这篇文章中，我们将看到如何在WebStorm中调试这些应用程序。

如果您以前从未在WebStorm中使用JavaScript调试器，我们建议您先观看此

[视频

](https://www.youtube.com/watch?v=a-IsnxZpRrQ)，了解如何开始使用。
与IntelliJ IDEA，PhpStorm，PyCharm和RubyMine中的Angular应用程序相同。

我们有一个使用Angular CLI生成的应用程序。
我们正在使用版本1.0.0-beta.26 - 创建此帖子时的最新版本，即2017年1月底。请注意，Angular CLI仍处于测试阶段 - 新版本经常发布，并且可能会引入一些突破变化。

运行

npm start
以在开发模式下运行应用程序。

您可以在终端中执行此操作，也可以双击WebStorm中npm工具窗口中的任务。

等待应用程序编译并且Webpack dev服务器准备就绪。
打开http：// localhost：4200 /在浏览器中查看。

[图片上传中。。。（1）]
请注意，当dev服务器正在运行时，如果更改任何源文件，应用程序将自动重新加载。

在WebStorm中创建一个新的JavaScript调试配置（菜单

*运行 - 编辑配置... - 添加 - JavaScript调试

*）来调试应用程序的客户端TypeScript代码。
将http：// localhost：4200 /粘贴到URL字段中。

**在WebStorm 2017.1（现在可在

[Early Access Preview

](https://confluence.jetbrains.com/display/WI/WebStorm+EAP)下
使用
）

**
不需要额外的配置：保存配置，你准备好了。

**在WebStorm 2016（.1，.2和.3）

**
配置文件系统中的文件与dev服务器上源地图中指定的路径之间的映射。
这是帮助WebStorm正确解析源地图所必需的。

映射应该在

src
文件夹和

webpack:///./src

将此值添加到具有调试配置中的项目结构的表中，如下所示：

NG-CLI-conf的

为了得到这个映射，我们调查了http：// localhost：4200 / main.bundle.map文件的内容。
这是一个包含编译应用程序源代码的软件包的源映射文件。
搜索

*main.ts

*，主应用程序的文件;
它的路径是

webpack:///./src/main.ts
。

保存配置，在代码中放置断点，并通过单击
IDE右上角配置列表旁边
的“

*调试”

*按钮
启动新的调试会话
。
浏览器将在http：// localhost：4200 /上打开。

一旦断点被击中，请转到IDE中的调试工具窗口。
您可以浏览调用堆栈和变量，逐步执行代码，设置观察器，评估变量以及调试时通常执行的其他操作。

[图片上传中。。。（3）]
有一个已知的限制：

在第一次调试会话中打开应用程序时，放置在页面加载中执行的代码中的断点可能不会受到打击。
原因是IDE需要从浏览器获取源映射，以便能够在放置在原始源中的断点上停止，并且只有在页面至少完成一次后才会发生。
作为解决方法，请在浏览器中重新加载页面。[Angular CLI