使用VSCode内置的JavaScript Debug Terminal来调试JavaScript

前言

我们学习JavaScript的时候，有时候光靠看还不能理解代码的执行过程，这时候就要借助debug了，很多教程都是教我们怎么在chrome开发工具中调试js，如果你是html、css、js需要一起使用，用chrome调试当然是没问题的。

但是如果你只是学习JavaScript，比如说刷leetcode，学习Nodejs等等，这里我们就用不到html和css了。像其他的c++、java都可以在ide中进行debug。而调试JavaScript还要用上chrome，会不会觉得太麻烦了。

但我们发现用node去执行JavaScript，在终端的打印有点low， 远没有chrome控制台这么强大。这也是我一开始不喜欢用node去执行JavaScript的原因。

其实VSCode 内置的 JavaScript Debug Terminal也能达到这种效果，只是很多人都不知道它。

现在我们将一步一步搭建调试环境。

添加调试配置

我们是使用Nodejs来调试JavaScript，所以你需要安装Node.js，说下我自己的版本

• VSCode 1.74.3
• Nodejs v18.13.0

现在我们有一个js文件，准备去 **debug **它。

我们选择自定义运行和调试配置，很多功能开启需要自定义。它会在项目根目录下生成.vscode文件夹，里面有个launch.json。

这里我们要改下默认配置，首先，name是可以随意取名的，作为配置名称，program指的是要运行和调试的文件，我们把它改为${workspaceFolder}/${file}，${file} 是当前打开的文件，这样一来我们每切换到另一个要运行调试的文件时，就不用更改配置了。

"internalConsoleOptions": "openOnSessionStart" 指的是启动调试后打开调试控制台面板，我们运行和调试不需要终端，调试控制台非常强大，这个我们后面会讲到。

还有非常多的配置选项，可以根据自己需要去配置，查看VSCode官方文档。

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch JS",
      "internalConsoleOptions": "openOnSessionStart",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/${file}"
    }
  ]
}

到此，我们的配置已经写好了，接下来我们开始调试。

使用调试

开启调试

首先，我们先打上一个断点，按f5启动调试，ctrl+f5以非调试模式运行，非调试模式运行会忽略断点的存在，直接执行到底。

这里我要说一点，我们使用ctrl + f5去执行JavaScript真的非常方便！！！，远远好用于用node命令去执行。

可以看到，右上角有个操作条，包含了常见的调试命令，这里就不细说了，网上教程很多。

左侧靠栏有变量、监视、调用堆栈等常用的信息和操作。

底部有调试控制台，可以打印我们调试输出的信息。

调试控制台的使用

其实我们会发现，调试控制台和chrome控制台使用起来非常像，VSCode是基于Electronjs开发的，跟chrome一样里面也有个Chromium v8，不难想，很多chrome开发工具能做的事，VSCode也能做。

我们可以在调试控制台进行执行JavaScript语句，有时这个功能真的很好用。

常见问题

没有可用的调试程序

这是我刚开始踩得一个坑，我们用调试控制台，如果运行结束后，去展开一个打印信息，会发现以下情况，这是因为我们执行完程序，nodejs进程结束了，没法继续工作，这跟**chrome开发工具还是有些不一样的，chrome控制台**即使不在调试状态下，也能继续工作。

那我们该怎么解决这个问题，如何让VSCode调试也能像chrome控制台一样的体验呢？

问题出在nodejs进程结束，那我们让nodejs不结束进程不就行了。

我们只需要在程序末尾卡个断点，让程序停在调试状态中，在末尾加个debugger语句即可。

注意：我们不能在空行加断点 (之前好像是可以的) ，VSCode会跳过空行断点，所以我们只能用debugger语句。

Nodejs输入问题

如果我们要调试的程序有输入语句，我们会发现我们的调试程序会卡住，无法工作，因为调试控制台不能进行输入。nodejs环境下可没有prompt()。好像很多同学都不知道在nodejs怎么进行输入的吧，其实我也不太会😱😱

但是我们有些题目是需要手写输入输出的，比如牛客上的题目，而不是leetcode模式，通过函数进行输入输出。

我们写个一个简单的单行输入示例，Nodejs v18才开始支持promise的readline。详细的可以查阅文档Readline | Node.js

const readline = require("node:readline/promises");
const { stdin: input, stdout: output } = require("node:process");

const rl = readline.createInterface({ input, output });

rl.question("你觉得Node.js怎么样?\n").then((answer) => {
  console.log(`感谢你的回答: ${answer}`);
  rl.close();
});

我们只需要在launch.json加一行配置。借助终端来进行输入。

但如果你需要调试的程序不需要输入，我是不建议打开这个开关的，因为每次调试都会在终端面板输出一大坨信息，有时还会闪一下，体验很不好，正常我们只需要调试控制台就够了。

最后

文章到这就结束了，下次我们来讲讲使用TypeScript刷LeetCode，并使用VSCode直接debug TypeScript🚀🚀🚀

如果文章对你有帮助，麻烦点个赞支持一下🥰🥰