TypeScript 如何用 VS Code 调试

刚写完一段复杂的前端代码，点击运行按钮，页面却弹出“undefined”的报错，反复检查好几遍，代码里的变量名、函数逻辑都没看出问题——这种情况是不是每个前端开发者都遇见过？别着急，用对调试工具能帮你把“卡壳”的代码理得明明白白，今天就说说前端圈常用的TypeScript，搭配轻量顺手的VS Code怎么调试。

先搭好“调试的基础架子”

要调试TypeScript，首先得确保VS Code里的环境没“掉链子”。先确认你已经装好VS Code，还得在电脑上装好Node.js和TypeScript工具——这俩是跑代码的基础，就像拍视频要先有摄像机和内存卡一样。

接下来给项目加两个小文件：一个是tsconfig.json，这是TypeScript的“配置说明书”，用来告诉编译器怎么转译代码。你可以在VS Code的终端里敲命令tsc --init，系统会自动生成这个文件，然后把里面的"sourceMap"改成true——这个选项很关键，它能让VS Code把编译后的JS代码和原始TS代码对应起来，就像给转译后的代码贴了“原始代码地址”的标签，调试时才能精准找到出错的地方。

另一个需要的是.vscode文件夹，里面建个launch.json，这是VS Code的“调试启动指令”，相当于告诉软件“我要调试哪段代码、用什么方式运行”。你可以在VS Code左侧的“运行和调试”面板（就是那个像 bug 虫子的小图标）里点“创建 launch.json”，选“Node.js”环境，系统会自动生成基础配置，只要把里面的program字段改成你要调试的TS文件路径，比如"${workspaceFolder}/src/index.ts"就行。

断点：让代码“停”在你想看的地方

搭好架子后，就可以开始调试核心操作了——打断点。这是调试最常用的小技巧，简单说就是让代码跑到某个地方就“暂停”，你可以逐行看变量、函数的状态，就像看电影时按下暂停键，慢慢看每一个细节。

怎么打断点？打开你写的TS文件，比如src/index.ts，只要在你想查看的代码行号左边点击一下，就会出现一个红圆点，这就是断点。举个例子，你写了一段计算用户积分的TS代码：

`typescript

function calculatePoints(score: number): number {

let points = 0;

if (score >= 80) {

points = 100;

} else if (score >= 60) {

points = 50;

}

return points;

}

console.log(calculatePoints(75));

`

如果怀疑else if的判断逻辑有问题，就可以在else if (score >= 60)那一行左边点出红圆点。

然后回到VS Code的“运行和调试”面板，点上面的绿色“运行”按钮，代码就会跑到你设的断点停住。这时候你可以看VS Code左侧的“变量”面板，能清楚看到score的值是75，points的值是0，再往下走一行，points就变成50——这样你一眼就能看出逻辑是对的，要是结果不对，也能快速找到哪一行出了问题。

进阶调试：快速排查常见问题

除了普通断点，还有两个小功能能帮你省不少时间。一个是“条件断点”，如果你只想在某个特定条件下让代码暂停，比如只看score等于75的情况，不用在每一行都设断点，只要右键已有的断点，选“编辑断点”，输入条件score ===75就行。另一个是“逐步调试”，代码暂停后，点VS Code顶部的“逐过程”按钮，就能一行一行往下走，每一步都能实时看到变量的变化，比反复刷新页面高效多了。

调试完别忘了检查：如果不想让断点一直存在，就点击红圆点取消；要是配置有问题，比如断点没生效，就回头看看tsconfig.json里的sourceMap是不是设成了true，launch.json里的文件路径有没有写错——很多时候小问题都是这些细节没注意到。

用VS Code调试TypeScript，本质是让“看不见的代码运行过程”变得可视化，不用再靠猜哪行出错，只要一步步跟着代码的脚步走，复杂的逻辑也能很快理清，是前端开发者提升效率的实用小技巧。