通过 SourceMap 调试 Typescript 文件 | VsCode DeBugVsCode 的 Debug 模

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 默认为 true
- outFiles 当 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 配置终端可以是外部终端或者内部集成终端，默认值 internalConsole
- autoAttachChildProcesses 跟踪调试对象的所有子过程，并自动附加到在调试模式下启动的- 子过程
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}：当前执行目录

通过 SourceMap 调试 Typescript 文件 | VsCode DeBug

Debugging 效果

第一步： Ts 编译附带 Map 文件

第二步：启动调试

通过命令行启动

配置 launch.json 文件启动

launch.json 属性配置