掌握VSCode调试JavaScript需先安装Node.js和VSCode，创建项目及app.js文件后，配置launch.json，设置断点并启动调试，通过变量面板和控制台检查值，结合条件断点、日志点、监听表达式等技巧提升效率；调试浏览器代码需安装Chrome或Edge调试插件，配置url和webRoot；调试异步代码建议使用async/await并在关键处设断点；调试压缩代码需启用sourceMaps并确保构建工具生成对应映射文件。
VSCode调试JavaScript代码是前端开发的必备技能，它能帮你快速定位并解决代码中的bug，提高开发效率。本文将通过详细的图解，一步步教你如何在VSCode中调试JavaScript代码。
解决方案
1. 安装Node.js 和 VSCode
首先，确保你的电脑上已经安装了Node.js。Node.js提供了JavaScript的运行环境。然后，安装VSCode编辑器。
立即学习“Java免费学习笔记（深入）”；
2. 创建项目和JavaScript文件
在你的电脑上创建一个新的文件夹，作为你的项目目录。然后在VSCode中打开这个文件夹。
创建一个新的JavaScript文件，例如
app.js，并在其中编写一些JavaScript代码。例如：
function add(a, b) {
let sum = a + b;
return sum;
}
let num1 = 5;
let num2 = 10;
let result = add(num1, num2);
console.log("The sum is: " + result);3. 创建launch.json文件
这是调试配置的关键。在VSCode中，点击“运行和调试”图标（侧边栏的虫子图标），然后点击“创建 launch.json 文件”。
选择“Node.js”环境。VSCode会自动生成一个
launch.json文件，位于
.vscode文件夹下。
launch.json文件内容大致如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"/**"
],
"program": "${workspaceFolder}/app.js"
}
]
} type
: 指定调试器类型，这里是"node"。request
: 指定调试请求类型，"launch"表示启动程序进行调试。name
: 调试配置的名称，可以自定义。program
: 指定要调试的JavaScript文件路径。这里是${workspaceFolder}/app.js，表示项目根目录下的app.js
文件。
4. 设置断点
在你的JavaScript代码中，点击行号左侧的空白区域，设置断点。断点会在程序执行到该行时暂停，允许你检查变量的值和程序的执行流程。
5. 启动调试
点击VSCode顶部菜单栏的“运行”->“启动调试”，或者直接按F5键。
程序会在断点处暂停。你可以使用调试工具栏上的按钮（继续、单步跳过、单步进入、单步跳出、重启、停止）来控制程序的执行。
6. 检查变量
在调试过程中，你可以通过VSCode的“调试控制台”或者“变量”面板来查看变量的值。
-
调试控制台: 可以在控制台中输入表达式，例如
num1 + num2
，来查看表达式的值。 - 变量面板: 会显示当前作用域内的所有变量及其值。
7. 调试技巧
-
条件断点: 右键点击断点，选择“编辑断点”，可以设置条件。只有当条件满足时，断点才会生效。例如，你可以设置一个条件，只有当
num1
大于10时，断点才会暂停。 - 日志点: 右键点击行号，选择“添加日志点”。日志点不会暂停程序的执行，而是会在控制台中输出一条日志消息。这对于在不暂停程序的情况下，观察变量的值非常有用。
- 监听表达式: 在“监视”面板中添加表达式，VSCode会实时显示表达式的值。
如何调试在浏览器中运行的JavaScript代码？
首先，你需要安装Chrome浏览器的调试插件“Debugger for Chrome”或者“Microsoft Edge Tools for VS Code”。
然后，修改
launch.json文件。将
type改为
chrome或者
msedge，并添加
url属性，指定要调试的网页地址。
例如：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}type
: 指定调试器类型，这里是"chrome"。url
: 指定要调试的网页地址。webRoot
: 指定网页的根目录。
确保你的网页已经在本地服务器上运行。然后，启动调试。VSCode会自动打开Chrome浏览器，并加载指定的网页。你可以在VSCode中设置断点，并像调试Node.js代码一样调试网页中的JavaScript代码。
调试异步JavaScript代码（例如Promise、async/await）的常见问题及解决方案
调试异步代码可能会比较棘手，因为程序的执行流程不是线性的。以下是一些常见问题及解决方案：
- 断点失效: 确保你的断点设置在正确的异步函数内部。有时候，断点可能设置在Promise的回调函数或者async函数的内部，但由于异步函数的执行时机不确定，断点可能不会被触发。
-
无法追踪Promise的reject原因: 在调试控制台中，可以使用
Promise.reject("Error message")来手动触发Promise的reject。然后，在调试器中观察Promise的状态和reject的原因。 - 使用async/await简化调试: async/await语法可以使异步代码看起来更像同步代码，从而更容易调试。尽量使用async/await来处理异步操作。
例如：
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
return data;
} catch (error) {
console.error("Error fetching data:", error);
}
}
fetchData();在这个例子中，你可以直接在
await语句处设置断点，逐步调试异步代码的执行流程。
如何使用sourcemap调试压缩后的JavaScript代码？
当你的JavaScript代码被压缩（例如使用Webpack或者Rollup）后，代码会变得难以阅读和调试。Sourcemap可以将压缩后的代码映射回原始代码，让你可以在调试器中看到原始代码，而不是压缩后的代码。
要使用sourcemap，你需要确保你的构建工具（例如Webpack）生成了sourcemap文件。然后在VSCode的
launch.json文件中，添加
sourceMaps属性，并设置为
true。
例如：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMaps": true
}
]
}确保sourcemap文件和压缩后的JavaScript文件位于同一个目录下。然后，启动调试。VSCode会自动加载sourcemap文件，并将压缩后的代码映射回原始代码。
掌握VSCode调试JavaScript代码的技巧，可以大大提高你的开发效率。希望本文能够帮助你更好地使用VSCode调试JavaScript代码。
