前言#
有些包是使用typescript编写的，但是发布时发布的是被typescript解析器解析后的，也就是javascript代码。而解析完后的js代码变得很”拥挤“，不是很好阅读，所以我们就需要去调试未被解析的源码，也就有了这篇文章。
官方链接：
配置#
如果要用到typescript就得先安装typescript,另外如果你全局没安装，你得安装一个。
npm install typescript -g
npm install typescipt --save-dev
echo > index.ts接着创建配置文件tsconfig.json，可以直接用typescript的命令工具
tsc --init 
另外如果你想知道tsc命令工具有哪些命令提供，你可以直接在终端中输入tsc（前提是没有配置文件），或者tsc --help又或者tsc -h
接着将sourceMap: true和`outDir: './${你想输出的文件夹}'这两行注释回来
或者你可以直接复制以下code到你的tsconfig.json文件中。
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "out", // 输出的文件夹
"sourceMap": true
}
} 这个对我们debug来说很重要，可以生成typescript的文件的source maps 。
这时你已经可以编译ts文件了，在终端中输入tsc或者tsc index.ts。tsc会全部编译输出到你的目标文件夹中，而tsc index.ts只会编译index.ts文件。
接着打开你的vscode,按下F5,或者左侧面板中点击debug面板按钮
创建一个launch.json文件
在弹出来的下拉框中选择TS Debug,这个可以快捷的帮你生成ts debug需要的字段。
如果你的vscode中没有这个选项，你可以先安装拓展
但这个插件配置的字段是需要依赖一个包的，所以我们现在并不能完全使用这些字段。后面的方法中能用到，所以这里先不解释。
我们直接复制一份官方的
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node", // 配置类型
"request": "launch", // 请求配置类型
"name": "Launch Program",
"program": "${workspaceFolder}/index.ts", // 代码入口文件，绝对路径
// "preLaunchTask": "tsc: build - tsconfig.json", // 调试前需要做的任务,这一行注释掉也没问题。
"outFiles": ["${workspaceFolder}/out/**/*.js"] // 编译后输出的位置
}
]
}workspaceFolder：是你的根目录
现在已经万事具备，直接F5。如果你的preLaunchTask没有注释掉，那么这里就会报错找不到这个tsc: build的任务，你可以选择无视，或者将tsc: build - tsconfig.json替换为tsc: 构建 - tsconfig.json。因为里面的字段被你的语言包替换掉了。
然后就能愉快的调试了。
跟着官方的例子，我们还能往下配置。
客户端调试#
顾名思义，就是调试浏览器端的代码，比如window或者操作dom的代码。
在我们之前的配置的基础上，创建一个index.html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>debug ts in client</title>
</head>
<body>
<div class="test">
<div class="t">123</div>
</div>
<script type="text/javascript" src="./out/client.js"></script>
</body>
</html>浏览器并不能识别ts文件，所以这里引入的script还得是编译后的js文件。
然后新建client.ts文件
const W = window;
console.log(W);
const domCollect = document.getElementsByClassName('test');
console.log(domCollect)
console.log();
然后改下我们的launch.json文件，新建一个configuration
改下url 为html文件的绝对路径，别忘了加上 "preLaunchTask": "tsc: 构建 - tsconfig.json",
如果没有这个任务，那你得先手动去终端执行tsc 。
接着只需要在client.ts文件中打上断点即可F5。
那么client端和node端调试ts文件也说完了。
但是这两种调试都有一个问题，那就是文件需要通过tsc先编译才行。
那么有没有方式可以不用经过编译直接调试呢？当然是有的，就是前面拓展中依赖的ts-node
ts-node#
简单的说就是不需要你提前编译ts文件。
回到我们的vscode中的launch.json文件中。
基于上边提到过的typescript debug拓展，新增一个TS Debug的configuration。如果你忘了怎么用了，可以往回看。
不过我们还得先安装ts-node
npm install ts-node -g
npm install ts-node 
但是别忘了加上 "program": "${workspaceFolder}/index.ts",
不然ts-node找不到对象。。
然后就能愉快的debug了。
参考#
发布于 2022-10-20 15:52