《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源码需要服务器提供服务。
- 点赞
- 收藏
- 关注作者
评论(0)