《TypeScript图形渲染实战：2D架构设计与实现》 —1.6 使用VS Code调试TypeScript源码

1.6  使用VS Code调试TypeScript源码

　　VS Code提供了强大的调试功能，可以非常方便地调试相关代码。本节来介绍VS Code中如何断点调试TypeScript源代码。

1.6.1  安装及配置Debugger for Chrome扩展

　　要调试HTML页面中的TypeScript（或JavaScript）代码，必须要安装Debugger for Chrome扩展。可以单击VS Code最左侧的活动栏中的扩展图标（或使用Shift + Ctrl + X快捷键）打开扩展面板，输入Debugger for Chrome后下载安装。

　　当安装好Debugger for Chrome后，按F5键进入调试状态，此时VS Code会显示如图1.24所示界面。

　　选择Chrome选项后，VS Code会自动在当前项目的根目录下生成一个名为.vscode的文件夹，并且同时在该文件夹内生成launch.json文件，具体内容如下：

{

　　version" : "0.2.0" ,

　　configurations" : [

　　{

　　　"type" : "chrome" ,

　　　"request" : "launch" ,

　　　"name" : "启动Chrome并打开localhost" ,

　　"url" : "http：//localhost:8080" ,

　　"webRoot" : "${workspaceFolder}"

　　} ]

}

　　在默认情况下，launch.json中的url属性使用8080端口，而lite-server服务器使用的端口是3000，因此更改url为htt://localhost:3000。由此可见，调试TypeScript / JavaScript源码需要服务器提供服务。