这篇文章基于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进行调用 :
安装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）