VsCode
的 Debug
模式支持通过 sourceMap
文件,在运行编译后的文件的情况下,直接 Debug Ts 源文件
Debugging
效果
如图所示,在 Debug
编译后 test.js
文件的时候,最终的效果是 debug Ts 源代码
,使我们更直观的看到代码运行的效果,一旦有误,可以直接在源码上修改,而不是通过编译后的 Js 文件,隔了一层
非常适合最后提供一个Node命令给用户使用的工具库的开发和调试,如:Next ( Next 本身也采用这种调试方法
)
要实现直接调试 Typescript
源文件,需要做到两步
第一步:编译Typescript
的时候一定要生成Map
文件
第二步:通过 Vscode
调试模式执行编译后的js
文件
第一步: Ts
编译附带 Map
文件
如果想要使用 VsCode
的Debug
模式来直接调试 Typescript
文件,需要设置 "sourceMap": true
,在编译时,必须生成 map
文件
有了 Map
文件,Debug
模式才能通过编译后的文件找到源代码并使在源代码中设置的断点生效
也可以使用
ts-node
直接运行Ts
文件调试
# 源文件
- test.ts
# 编译后文件
- test.js
- test.d.ts
- test.js.map # 必须
第二步:启动调试
通过命令行启动
VsCode
提供了一个调试终端,在终端选择框,选择 Create JavaScript Debug Terminal
,创建调试终端后,直接运行 node
命令,就可以启动调试模式了,该模式也支持通过 sourceMap
调试 Ts 源文件
配置 launch.json
文件启动
创建 launch.json
配置文件,启动 Debug
模式
{
"version": "0.2.0",
"configurations": [
{
"name": "launch", // debug 命令的名称,在debug下拉窗口显示
"type": "node", // 调试类型,根据语言选择,JavaScript一般为node
"request": "launch", // 调试启动类型:launch: 就是以 debug 模式启动调试;attach: 就是附加到已经启动的进程开启 debug 模式并调试
"program": "${workspaceRoot}/lib/test",
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
]
}
launch.json
属性配置
-
常用配置
name
:debug
命令的名称,在 debug 下拉窗口显示type
: 调试类型,根据语言选择,JavaScript
一般为node
request
: 调试启动类型:launch
: 就是以debug
模式启动调试;attach
: 就是附加到已经启动的进程开启debug
模式并调试program
指定调试入口文件地址args
传递给程序的参数,可在process.argv
拿到cwd
指定程序启动调试的目录runtimeExecutable
设置运行时可执行文件路径,默认是node
,可以是其他的执行程序,如-npm
、nodemon
runtimeArgs
传递给运行时可执行文件的参数
-
公共属性
name
:debug
命令的名称,在 debug 下拉窗口显示type
: 调试类型,根据语言选择,JavaScript
一般为node
request
: 调试启动类型:launch
: 就是以debug
模式启动调试;attach
: 就是附加到已经启动的进程开启debug
模式并调试protocol
设置调试协议auto
尝试自动检测目标运行时使用的协议inspector
新的 V8 调试器协议,解决遗留版本的多数问题,node versions >= 6.3 - and Electron versions >= 1.7.4.
legacy
原始的 v8 调试器协议,node versions < v8.0 and Electron versions < 1.- 7.4.
port
调试使用的端口address
TCP/IP 地址,用于远程调试localRoot
远程调试时映射的本地地址remoteRoot
远程调试时的远程目录地址sourceMaps
默认为 trueoutFiles
当 map 文件不在 js 文件同目录时用于指定 sourceMaps 的位置restart
自动重启调试timeout
配置自动附加的超时时间stopOnEntry
自动断点到第一行代码处smartStep
自动跳过未映射到源代码的代码skipFiles
指定跳过单步调试的代码trace
启用诊断输出
-
launch
模式属性program
指定调试入口文件地址args
传递给程序的参数,可在process.argv
拿到cwd
指定程序启动调试的目录runtimeExecutable
设置运行时可执行文件路径,默认是node
,可以是其他的执行程序,如-npm
、nodemon
runtimeArgs
传递给运行时可执行文件的参数runtimeVersion
设置运行时可执行程序的版本,如果使用 nvm,可以切换node.js
版本env
添加额外的环境变量envFile
文件加载环境变量console
配置终端可以是外部终端或者内部集成终端,默认值 internalConsoleautoAttachChildProcesses
跟踪调试对象的所有子过程,并自动附加到在调试模式下启动的- 子过程
-
attach
附加模式的配置processId
指定nodejs
进程id
, 由于每次启动都会变,传入"${command:PickProcess}"
平台特有属性
"windows":Windows
"linux":Linux
"osx":macOS
但凡被windows、linux、osx包裹的属性只会在对应平台生效,如:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/node_modules/gulp/bin/gulpfile.js",
"args": ["myFolder/path/app.js"],
"windows": {
"args": ["myFolder\\path\\app.js"]
},
"osx": {
"stopOnEntry": false
}
}
]
}
launch.json
默认变量
${workspaceFolder}
:当前打开工程的路径。${file}
:当前打开文件的路径。${fileBasename}
:当前打开文件的名字,包含后缀名。${fileDirname}
:当前打开文件所在的文件夹的路径。${fileExtname}
:当前打开文件的后缀名。${cwd}
:当前执行目录