《TypeScript图形渲染实战：2D架构设计与实现》 —1.6.2 VS Code中单步调试TypeScript

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行代码处。