引言

大家好啊，我是前端拿破轮。

对于一名软件工程师而言，调试代码的时间绝对是远远大于编写代码的时间的。无论是修改bug还是测试功能，都离不开对代码进行调试。

在2025年的今天，TypeScript几乎已经成为了很多前端项目的必选项。那我们如何通过断点调试的方式，在我们最常用的编辑器vscode中直接调试TypeScript的代码呢？

今天拿破轮就带着大家基于原生node实现对ts文件的直接调试，不用在安装ts-node或者tsx或者别的ts运行工具。

安装nvm

首先，先要安装nvm，如果已经安装了nvm并且很清楚其作用的可以直接看下一个部分。

什么是nvm呢？nvm(node version manager)，就是一个node的版本管理工具，这是其github仓库地址。

在我们日常开发中，我们可能有公司的业务项目，可能有自己的小项目，可能有参与的开源项目。而不同的项目之间使用的node版本很可能不同。我们不可能在切换项目的时候，每次都把node卸载了再重新安装，所以就需要nvm来帮助我们进行node版本的快速切换。

根据其官网描述，认清自己的电脑系统安装nvm即可。具体安装细节不是本文描述重点，可自行查阅相关资料。

安装node24及以上的版本

在过去，要想在vscode中调试TypeScript项目，往往需要使用ts-node或tsx等第三方工具。但是node在24以上的版本中已经支持了直接运行ts文件。所以我们可以直接进行调试。

利用nvm安装node24及以上版本。拿破轮以24.3.0为例。

1
nvm install 24.3.0

然后可以使用检查一下是否安装成功。

1
2
3
node -v

# 应该输出 v24.3.0

接着创建用vscode打开一个文件夹，并进行node初始化。

1
pnpm init

新建一个index.ts文件，取名可以任意，自取即可。

我们写入leetcode第一题两数之和进行测试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// index.ts

const towSum = (nums: number[], target: number): number[] => {
  const map = new Map();
  for (let i = 0; i < nums.length; i++) {
    const complement = target - nums[i];
    if (map.has(complement)) {
      return [map.get(complement), i];
    }
    map.set(nums[i], i);
  }
  return [];
};

console.log(towSum([2, 7, 11, 15], 9));

创建配置文件

然后我们创建一个调试的配置文件，点击下图所示位置：

20250727163421

调试器选择Node.js

20250727163532

然后我们可以看到在当前工作区生成了一个.vscode文件夹，并且下面有一个launch.json配置文件。

20250727163926

在launch.json中写入如下配置，最关键的就是runtimeVersion选项，表示运行时的版本，这里就是指node的版本，一定要指定为我们刚才安装的24及以上的版本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",                               // 调试器：Node.js
      "runtimeVersion": "24.3.0",                   // node版本，关键配置，一定要指定为我们刚才安装的24以上的版本，否则调试会报错
      "request": "launch",                          // 请求类型：启动，即由vscode创建一个node进行进程调试  
      "name": "TypeScript Debug",                   // 配置名称，自己任取，会显示在debugger面板中
      "skipFiles": [
        "<node_internals>/**"                       // 跳过node内部文件
      ],
      "program": "${file}",                         // 要调试的程序,这里使用${file}表示当前打开的文件   
      "console": "integratedTerminal",              // 在内置集成终端中运行  
    }
  ]
}

开始调试

在刚才创建的index.ts中打一个断点进行调试，如下图：

20250727164151

直接点击F5开始调试。

然后我们就发现程序进入了调试界面：

20250727164247

这里的TypeScript Debug就是我们刚才在launch.json中配置的调试器名称，可以自己自定义。

我们发现程序已经停在了断点处。我们就可以查看当前执行上下文信息，单步调试等等操作了，就和调试js文件一样。

20250727164417

总结

本文利用Node.js24及以上版本对ts文件的直接运行支持，实现了在vscode中直接调试TypeScript文件的调试配置。首先要安装nvm，然后要使用24及以上版本，接着一定要在launch.json中配置runtimeVersion为我们指定的版本，然后直接进行调试即可。

好了，这篇文章就到这里啦，如果对您有所帮助，欢迎点赞,收藏,分享👍👍👍。您的认可是我更新的最大动力。由于笔者水平有限，难免有疏漏不足之处，欢迎各位大佬评论区指正。

往期推荐✨✨✨

我是前端拿破轮，关注我，一起学习前端知识，我们下期见！