使用vscode一键断点调试typescript

本来我是webstorm死忠,只是近一年来vscode发展迅速,感觉其性(功能)价(内存)比已经超过webstorm,虽然有一些细节功能还不如webstorm,不过就typescript而言,同是微软自家的东西,会支持的更好一些,所以近来就转战vscode了~

目前typescript的断点调试方案,很多编辑器/IDE官方或一些技术博文,大多都是先手动(或其他相对自动化的方式)编译生成javascript以及相应sourcemap,然后以javascript为入口进行调试。
这种方式,还是不够便捷。

本文介绍的断点调试,『无需手动编译ts文件』,就像调试javascript代码一样,乃真正的『一键』调试。另外,本文针对node环境的代码进行调试,对于前端代码不一定试用

关键角色就是ts-node啦。既可通过命令行方式,也可以通过register方式使用。

接下来直奔主题。

ts-node可以通过npm安装,全局安装或局部安装,看你的需要。这里我们假定是局部安装。

如果你还不知道vscode的launch.json,请移步这里

调试一般ts

launch.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"version": "0.2.0",
"configurations": [
{
"name": "Current TS File",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/ts-node/dist/_bin.js",
"args": [
"${relativeFile}"
]
}
]
}

tsconfig.json? 不需要!
然后,打开你打算调试的ts文件,按下F5就可以开始断点调试啦~~~
如果你的工程是一个app,具有固定的启动入口,那么就把args字段改为入口文件路径(比如"args": ["src/index.ts"]),而无需每次调试前,都切换到入口文件。

上图:

mocha

单元测试越来越重要,推荐使用mocha, 那么测试文件如何调试呢?
lanuch.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"version": "0.2.0",
"configurations": [
{
"name": "Current TS Tests File",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/_mocha",
"args": [
"-r",
"ts-node/register",
"${relativeFile}"
]
}
]
}

然后,打开你打算调试的单元测试ts文件,按下F5就可以开始断点调试啦~

上图:

另外,推荐使用power-assert这个断言库,推荐理由参考eggjs单元测试. 配合typescript,就一共需要安装power-assertespower-typescript这两个库,那么launch.json就变成:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"version": "0.2.0",
"configurations": [
{
"name": "Current TS Tests File",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/_mocha",
"args": [
"--compilers",
"ts:espower-typescript/guess",
"${relativeFile}"
]
}
]
}

是的,你没看错,这种就不需要ts-node了,espower-typescript会做类似的事情。调试方法同上。只是有一个小缺点,log中的彩色信息无法显示。如果是通过命令行运行,就会比较好看,上图:

如果你的ts-node通过全局安装,那么程序入口需要改成它的全局路径。
如果你的launch.json配置了多个调试对象,需要在左侧调试面板中进行选择。F5运行的就是选中的调试设置。

总结

其实理解起来,还是蛮简单的,就是通过launch.json告诉vscode,以debug方式启动node,调用ts-node,再为ts-node传入被调试的文件。
一次配置,一劳永逸,像调试javascript一样调试typescript,就是这么简单!