老规矩,仍然针对的是vscode做说明。
本文仅针对node调试举例说明,因为node不需要vscode安装插件即可实现。
前提条件,已经建立了如下文件结构的ts项目。
src 源码路径 dist js导出路径 tscconfig.json 项目配置文件
进行调试之前,首先需要理解js调试的运作机制。
调试,针对的是ts源码。而js,作为ts项目的最终执行文件,想和源码对应起来,就需要sourceMap的支持,具体细节可以参考相关资料。总之,独立的sourceMap文件或者嵌入js内部的sourceMap标记是调试器用来识别js和ts源码对应关系必不可少的部分。
因此,需要开启tsc编译导出sourceMap信息的功能,为了方便,采用inlineSourceMap方式,因为此方法不会额外导出文件。
修改tsconfig.json中的如下配置:
// 其他配置省略
"compilerOptions":{
"inlineSourceMap": true
}
执行vscode菜单项:运行-添加配置
会自动生成.vscode/launch.json文件
添加如下配置:
// 省略其他配置
"configurations":[{
// 调试方式:node
"type": "node",
"request": "launch",
// 调试行为的名称
"name": "xxxx",
// 终端的方式,以下表示内部终端
"console": "integratedTerminal",
// 调试上下文环境,在终端中表示 %cd% 的路径,${workspaceFolder}表示当前的工作路径
"cwd": "${workspaceFolder}",
// 要调试的代码,即ts文件,${file}表示编辑器正在打开的文件,采用此设置可以方便在源码中打断点
"program": "${file}",
"outFiles": [
// 输出的文件路径,即js文件的路径,可以直接指定文件名,使用通配符会遍历所有符合条件的js文件,找出与program指定的ts源码关联的js文件,并且用node执行此js,此项越具体,启动调试的速度越快
"${workspaceFolder}/dist/*.js"
]
}]
点击vscode左侧调试功能。
在Run中选中配置好的项目,开始调试。
然后调试器会自动开始扫码符合条件的js文件,进行调试。
期间可在ts文件中打断点观察执行堆栈和变量状态。