VSCode调试JavaScript代码(详细图解，前端必学技能)

掌握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": [         "<node_internals>/**"       ],       "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代码。