《TypeScript图形渲染实战：2D架构设计与实现》 —1.6.2 VS Code中单步调试TypeScript
【摘要】 本节书摘来自华章计算机《TypeScript图形渲染实战：2D架构设计与实现》 一书中第1章，第1.6.2节，作者是步磊峰。
1.6.2 VS Code中单步调试TypeScript
当再次按F5键启动Debugger for Chrome后（当前lite-server服务器已开启），会出现调试界面，运行index.html页面，如图1.25所示。
图1.25 VS Code调试按钮界面
关于调试按钮说明，如表1.1所示。
表1.1 调试按钮说明
以前面的Hello World Demo为例，来看一下如何使用表1.1中的调试命令。
如图1.26所示，在maint.ts中添加一个断点（第51行）。
图1.26 添加调试断点
按F5键启动Debugger for Chrome调试器，此时显示如图1.25所示的调试界面，并且程序在断点处（第51行）中断，如图1.27所示。
按F10键（单步跳过），会发现程序单步执行到下一行代码（此时程序在第52行代码处中断）。
图1.27 按F5键启动调试后程序在断点处中断
如果现在不想单步执行了，那么可以按F5键（继续）运行程序，如果后续代码没有断点，则程序会正常执行到全部结束为止。如果后续代码有另外一个断点（例如在第64行代码处再增加一个断点），那么按F5键后会发现，程序再一次在第64行处中断。
如果现在想在第64行代码处进入drawText方法，那很简单，可以按F11键（单步进入）进入drawText方法内。如果不使用F11键而是用F10键（单步跳过），则会跳过drawText方法，执行到第65行代码处中断。
现在假设已经在drawText方法体内，可以继续使用F10键进行单步执行，也可以使用Shift + F11键跳出drawText方法，并返回到第65行代码处。
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）