这篇文章基于vs cdoe 的typescript 配置, 相关文件结构和ts的配置请参照vs cdoe 的typescript 配置
这里的的html调试是基于goole chrome, 如果没有, 请先安装, 关于chrome的安装这里就不做描述了
修改main.ts的代码为:
function
greeter(
person ) {
return
"Hello " +
person
}
let
user =
"Jan ss User"
console.
log(
user)
document.
body.
innerHTML =
greeter(
user)
新建index.html
在index.html 里输入html5, 会自动补全, 给一个默认格式的html(这是vscode的功能), 然后在body里加上script对js进行调用 :
扫描二维码关注公众号,回复:
1713034 查看本文章
安装Debugger for Chrome
配置launch.json: 添加配置 -> 选择Chrome:lanch -> 修改name和file(name设置为自己喜欢的, file根据自己的index.html目录设置, 我的目录如上上图, 所以配置如下)
选择刚刚配置的调试配置:
到此处, 配置完成, 调用 ctrl+alt+b进行代码编译, 点击上图的绿色三角或者直接按键盘的F5进行调试
题外:这个配置很快就配好了, 但是折腾了很久都不执行到我的断点。因为在vs code里F5启动一直不调用断点(我之前做服务 器开发, 经常用启动调试--惯性思维)。 后来想到浏览器页面调试是执行过后刷新才能断点调试, 所以vs code也一样, F5启动过后, 启动过程 的代码断点是不会触发的, 你需要刷新一下页面(就是需要在vscode调用出来的网页上再按一下F5)