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一样调试它。