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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,067评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,834评论 25 709
  • 开始定位的高低,决定了物品的价值,定的价格要比你的心里价位要高,才能在之后的谈判中,适当的调整价位,如果一开始就定...
    高密中百阅读 167评论 0 0
  • 做一生俗人,度一世平安
    蒋小满阅读 172评论 0 0
  • 夏末那么冷漠得不回应,和流火轰轰烈烈辛苦准备那么久的告白典礼,还是让流火在校园里出了名。 学校里都知道了流火的“深...
    有鱼姑娘阅读 360评论 0 5