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
将此值添加到具有调试配置中的项目结构的表中,如下所示:
![img_9223d2d6d6950e1ca4d5d5b868c4918b.png](https://yqfile.alicdn.com/img_9223d2d6d6950e1ca4d5d5b868c4918b.png?x-oss-process=image/resize,w_1400/format,webp)
为了得到这个映射,我们调查了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中的调试工具窗口。
您可以浏览调用堆栈和变量,逐步执行代码,设置观察器,评估变量以及调试时通常执行的其他操作。
![img_ed5e1fec86ca746342a08e9e673812f5.png](https://yqfile.alicdn.com/img_ed5e1fec86ca746342a08e9e673812f5.png?x-oss-process=image/resize,w_1400/format,webp)
有一个已知的限制:
在第一次调试会话中打开应用程序时,放置在页面加载中执行的代码中的断点可能不会受到打击。
原因是IDE需要从浏览器获取源映射,以便能够在放置在原始源中的断点上停止,并且只有在页面至少完成一次后才会发生。
作为解决方法,请在浏览器中重新加载页面。01/debugging-angular-apps/