译文,原文地址 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的调试配置:
选择运行|在主菜单上单击编辑配置,
5.在工具栏上单击添加,然后从弹出列表中选择JavaScript调试。
在打开的“运行/调试配置:JavaScript调试”对话框中,指定应用程序运行的URL地址。
这里的URL地址是从第三步复制过来的,点击OK,保存设置。
调试。这时会弹出一个新的浏览器窗口,运行配置中指定的URL地址。并显示调试工具窗口。(注:注意,第三步的时候运行npm start 会删掉编译的JavaScript代码,所以当拿到URL的时候要停掉server,并且重新运行ng build,获取JavaScript代码,否则断点无法走到)
7.在调试工具窗口中,照常进行:逐步执行程序,停止并恢复程序执行,在暂停时检查它,查看实际的HTML DOM等。
(此时已经大功告成啦)
如果您的TypeScript代码在内置的WebStorm服务器上运行,您还可以像调试在内置服务器上运行的JavaScript一样调试它。