调试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

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

调试WebStorm中创建的Angular应用程序
NG-CLI-conf的

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

*main.ts

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

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

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

*调试”

*按钮
启动新的调试会话

浏览器将在http:// localhost:4200 /上打开。

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

[图片上传中。。。(3)]
有一个已知的限制:

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

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

[图片上传中。。。(2)]为了得到这个映射,我们调查了http:// localhost:4200 / main.bundle.map文件的内容。
这是一个包含编译应用程序源代码的软件包的源映射文件。
搜索

*main.ts

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

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

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

*调试”

*按钮
启动新的调试会话

浏览器将在http:// localhost:4200 /上打开。

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

调试WebStorm中创建的Angular应用程序
NG-CLI-断点

有一个已知的限制:

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

上一篇:数据结构基础(12) --双向循环链表的设计与实现


下一篇:Silverlight企业应用框架设计【六】自定义系统菜单(使用自己的DataForm)