配置launch.json是VSCode调试JS的关键，首先选择调试环境如Node.js或Chrome，设置"type"、"request"、"program"或"url"等参数，保存后通过F5启动调试，结合断点、单步执行与变量监视，即可高效排查问题。
VSCode调试JS，简单来说，就是让你像医生看病一样，能看到代码运行的“内部器官”，找出“病灶”（bug）。通过设置断点、单步执行、查看变量等手段，你可以逐行分析代码，理解它的运行逻辑，最终解决问题。
配置好launch.json文件，设置断点，启动调试，然后像玩游戏一样，一步一步地看代码执行，观察变量变化，bug就无处遁形了。
launch.json文件配置，断点设置，变量观察，单步调试，这几个是关键。
如何配置VSCode的launch.json文件进行JavaScript调试？
配置
launch.json文件，是开启VSCode调试JS之旅的第一步。很多人觉得这玩意儿复杂，其实不然。简单来说，
launch.json就是告诉VSCode，你想用什么环境、什么方式来调试你的JS代码。
立即学习“Java免费学习笔记（深入）”；
首先，在VSCode中打开你的项目，然后点击左侧的调试按钮（就是那个像虫子一样的图标），接着点击“创建launch.json文件”。VSCode会提示你选择调试环境，对于Node.js项目，选择“Node.js”；对于浏览器端的JS，选择“Chrome”或者“Edge”（取决于你用的浏览器）。
接下来，VSCode会自动生成一个
launch.json文件。这个文件里面有很多配置项，但你只需要关注几个关键的：
-
"type"
: 指定调试器类型，比如"node"
或者"chrome"
。 -
"request"
: 指定调试方式，通常是"launch"
（启动一个新的进程）或者"attach"
（连接到一个已经运行的进程）。 -
"name"
: 给你的调试配置起个名字，方便你以后选择。 -
"program"
: 指定要调试的入口文件，比如"./index.js"
。 -
"url"
: 如果你调试的是浏览器端的JS，这里指定要调试的网页地址，比如"http://localhost:3000"
。 -
"runtimeExecutable"
: 如果调试的是浏览器端的JS，并且使用Chrome，可能需要指定Chrome的路径，例如"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
。 -
"webRoot"
: 指定你的web应用的根目录，通常是${workspaceFolder}。
举个例子，如果你要调试一个Node.js项目，你的
launch.json文件可能看起来像这样：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"/**"
],
"program": "${workspaceFolder}/index.js"
}
]
} 如果你要调试一个浏览器端的JS项目，你的
launch.json文件可能看起来像这样：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}配置好
launch.json文件后，保存它。以后你就可以直接点击调试按钮，选择你配置好的调试环境，开始调试你的JS代码了。当然，根据你的项目结构和需求，你可能需要对
launch.json文件进行一些调整，但掌握了这些基本配置项，你就已经入门了。
如何在VSCode中设置断点并进行单步调试？
断点，顾名思义，就是让代码执行到这里暂停的地方。设置断点非常简单，只需要在VSCode的代码编辑区域，点击你想要暂停的那一行代码的左侧空白区域。你会看到一个红色的圆点，这就是断点。
设置好断点后，启动调试（点击调试按钮，或者按下F5）。VSCode会启动你配置好的调试环境，并执行你的JS代码。当代码执行到你设置的断点时，它会暂停下来。
这时，你就可以使用VSCode提供的单步调试功能了。VSCode的调试工具栏通常会显示在屏幕上方，上面有一些按钮，可以让你控制代码的执行流程：
- 继续 (F5): 让代码继续执行，直到遇到下一个断点，或者程序结束。
- 单步跳过 (F10): 执行当前行代码，然后跳到下一行。如果当前行是一个函数调用，它会直接执行完整个函数，跳到函数调用之后的下一行。
- 单步进入 (F11): 执行当前行代码，如果当前行是一个函数调用，它会进入到函数内部，让你逐行执行函数内部的代码。
- 单步跳出 (Shift+F11): 如果你当前在函数内部，这个按钮会让你跳出当前函数，回到函数调用之后的位置。
- 重新启动 (Ctrl+Shift+F5): 重新启动调试会话。
- 停止 (Shift+F5): 停止调试会话。
通过这些单步调试功能，你可以逐行执行你的代码，观察代码的执行流程，理解代码的逻辑。如果遇到问题，你可以随时暂停代码的执行，查看变量的值，分析问题的原因。
如何使用VSCode的调试控制台和变量查看器？
调试控制台和变量查看器，是VSCode调试JS的两个利器。它们可以让你在调试过程中，实时查看代码的输出和变量的值，帮助你更好地理解代码的运行状态。
调试控制台，顾名思义，就是用来显示调试信息的控制台。你可以在代码中使用
console.log()语句，将一些信息输出到调试控制台。在调试过程中，这些信息会显示在调试控制台中，帮助你了解代码的执行情况。
除了
console.log()，你还可以使用
console.error()、
console.warn()等语句，输出不同类型的调试信息。这些信息在调试控制台中会以不同的颜色显示，方便你区分。
变量查看器，是用来显示变量的值的。在调试过程中，VSCode会自动显示当前作用域内的所有变量的值。你可以在变量查看器中，展开对象和数组，查看它们的内部结构。
变量查看器通常会显示在VSCode的左侧或者底部。你可以通过拖拽来调整变量查看器的位置和大小。
除了自动显示变量的值，你还可以在变量查看器中手动添加要查看的变量。只需要在代码中选中一个变量，然后右键点击，选择“添加到监视”，这个变量就会被添加到变量查看器中。
通过调试控制台和变量查看器，你可以实时了解代码的运行状态，观察变量的值，从而更好地理解代码的逻辑，找到问题的原因。这两个工具是调试JS必不可少的助手。
如何调试异步JavaScript代码（例如Promise、async/await）？
调试异步JS代码，是JS调试中的一个难点。因为异步代码的执行顺序和同步代码不同，它不会按照代码的顺序依次执行，而是会根据异步操作的结果来决定执行顺序。
对于Promise，你可以使用
.then()和
.catch()来处理异步操作的结果和错误。在调试Promise时，你可以在
.then()和
.catch()中设置断点，观察异步操作的结果和错误。
对于async/await，你可以像调试同步代码一样，直接在
await语句上设置断点。当代码执行到
await语句时，它会暂停下来，等待异步操作完成。你可以使用单步调试功能，逐行执行
async函数中的代码，观察异步操作的结果。
但是，有时候异步代码的调试会比较麻烦，因为代码的执行顺序可能会比较复杂。这时，你可以使用VSCode的“调用堆栈”功能，查看代码的调用关系。调用堆栈会显示当前代码的调用路径，让你了解代码是从哪里被调用的，以及调用了哪些函数。
此外，你还可以使用VSCode的“异步断点”功能。异步断点可以在异步操作完成时暂停代码的执行，让你更好地理解异步代码的执行流程。要使用异步断点，你需要在
launch.json文件中配置
"breakOnAsyncCall": true。
调试异步JS代码需要一些技巧和经验，但只要掌握了这些方法，你就可以轻松应对各种复杂的异步场景。
