ts项目的调试

老规矩，仍然针对的是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文件中打断点观察执行堆栈和变量状态。