Angular 通过WebStorm 调试TypeScript

译文,原文地址 https://www.jetbrains.com/help/webstorm/debugging-typescript.html

调试TypeScript

说明

在调试之前,您需要将代码编译为JavaScript。
WebStorm需要映射源代码来识别您在TypeScript代码中设置的断点。要在编译期间生成映射,请打开tsconfig.json文件并确保sourceMap属性设置为true。
在开始之前,按照配置JavaScript调试器中的描述配置内置调试器。要使用Live Edit功能在浏览器中实时显示HTML和CSS中的更改,请安装JetBrains IDE支持Chrome扩展。在HTML,CSS和JavaScript中的Live Edit中查找更多信息。(注:配置方法及安装插件http://blog.csdn.net/sujun10/article/details/54139560)
在客户端调试TypeScript
大多数情况下,您可能需要调试运行在外部开发Web服务器上的客户端应用程序,例如由Node.js提供支持。

1.在TypeScript代码中配置和设置断点。

2.将TypeScript代码编译为JavaScript。(注:运行ng build,在根目录下会生成一个dist文件夹,就是JavaScript)

3.在开发模式下运行应用程序。通常你需要运行npm start。当开发服务器准备就绪时,复制在浏览器中运行应用程序的URL地址。(后面会用到)您需要在运行/调试配置中指定此URL地址。

4.创建类型为JavaScript Debug的调试配置:
选择运行|在主菜单上单击编辑配置,


image.png

5.在工具栏上单击添加,然后从弹出列表中选择JavaScript调试。


image.png

在打开的“运行/调试配置:JavaScript调试”对话框中,指定应用程序运行的URL地址。
这里的URL地址是从第三步复制过来的,点击OK,保存设置。


image.png

6.在工具栏上的选择运行/调试配置下拉列表中选择新创建的配置,然后单击调试按钮
debug

调试。这时会弹出一个新的浏览器窗口,运行配置中指定的URL地址。并显示调试工具窗口。(注:注意,第三步的时候运行npm start 会删掉编译的JavaScript代码,所以当拿到URL的时候要停掉server,并且重新运行ng build,获取JavaScript代码,否则断点无法走到)
7.在调试工具窗口中,照常进行:逐步执行程序,停止并恢复程序执行,在暂停时检查它,查看实际的HTML DOM等。
(此时已经大功告成啦)
如果您的TypeScript代码在内置的WebStorm服务器上运行,您还可以像调试在内置服务器上运行的JavaScript一样调试它。

你可能感兴趣的:(Angular 通过WebStorm 调试TypeScript)