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

举报
华章计算机 发表于 2019/12/11 12:03:46 2019/12/11
【摘要】 本节书摘来自华章计算机《TypeScript图形渲染实战:2D架构设计与实现》 一书中第1章,第1.6.1节,作者是步磊峰。

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后下载安装。

image.png

  当安装好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源码需要服务器提供服务。


【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。