VSCode调试JavaScript代码

 一、Node.js 环境调试（适用于脚本/服务端JS）

步骤 1：准备工作

1. 安装 [Node.js](https://nodejs.org/)

2. 在 VSCode 中创建 JS 文件（如 `app.js`），写入测试代码：

   ```javascript

   function sayHello(name) {

     const message = `Hello, ${name}!`;

     console.log(message); // 打印信息

     return message;

   }

   // 执行函数

   const result = sayHello("Alice");

   console.log("函数返回值:", result);

   // 调试断点示例

   debugger; // 特殊断点标记

   console.log("调试结束");

   ```

 步骤 2：配置调试器

1. 打开调试面板：  

   - 左侧活动栏点击 虫子图标 或快捷键 `Ctrl+Shift+D`（Windows/Linux）/ `Cmd+Shift+D`（Mac）

   - 点击 "创建 launch.json 文件" → 选择 "Node.js"

2. 自动生成 `launch.json`，修改配置为：

   ```json

   {

     "version": "0.2.0",

     "configurations": [

       {

         "type": "node",        // 调试类型

         "request": "launch",   // 启动模式

         "name": "启动程序",    // 自定义名称

         "skipFiles": ["<node_internals>/**"],

         "program": "${workspaceFolder}/app.js" // 你的JS文件路径

       }

     ]

   }

   ```

 步骤 3：开始调试

1. 设置断点：在代码行号左侧点击（红点标记，如第 2 行）

2. 启动调试：

   - 按 `F5` 或点击调试面板顶部的 **绿色三角按钮**

3. 调试操作：

   - 继续（`F5`）：运行到下一个断点

   - 单步跳过（`F10`）：执行当前行，不进入函数

   - 单步调试（`F11`）：进入函数内部

   - 查看变量：左侧 [变量] 面板实时显示作用域变量

   - 监视表达式：底部 [监视] 面板添加自定义表达式（如 `name`）

   - 控制台输出：在 [调试控制台] 查看 `console.log()` 结果

---

二、浏览器环境调试（适用于前端JS）

 方案 A：使用 Chrome 调试器（推荐）

1. 安装 VSCode 扩展：  

   - 搜索并安装 **"Debugger for Chrome"**（已更名为 **"JavaScript Debugger"**）

2. 创建 HTML 文件（如 `index.html`）引入 JS：

   ```html

   <!DOCTYPE html>

   <html>

   <body>

     <script src="app.js"></script>

   </body>

   </html>

   ```

3. 配置 `launch.json`：

   ```json

   {

     "version": "0.2.0",

     "configurations": [

       {

         "type": "chrome",

         "request": "launch",

         "name": "Chrome 调试",

         "url": "http://localhost:5500/index.html", // 本地服务器地址

         "webRoot": "${workspaceFolder}"

       }

     ]

   }

   ```

4. 启动本地服务器（任选其一）：

   - **Live Server 扩展**：右键 HTML 文件 → "Open with Live Server"

   - **Node.js 静态服务器**：终端运行 `npx http-server`

5. 按 `F5` 启动调试，Chrome 自动打开并命中断点。

方案 B：浏览器开发者工具（快速打印信息）

1. 在 HTML 文件中右键 → "Open with Live Server"

2. 浏览器中按 `F12` 打开开发者工具

3. 在 Console 面板：

   - 查看 `console.log()` 输出

   - 直接输入函数名（如 `sayHello("Bob")`）执行函数

4. 在 Sources 面板：

   - 设置断点、单步调试（类似 VSCode）

---

 三、关键调试技巧

1. 实时日志：

   - 使用 `console.log()` 在 [调试控制台] 输出信息

   - 支持 `console.table()`/`console.dir()` 格式化输出

2. 条件断点：

   - 右键断点 → 设置条件（如 `name == "Alice"`）

3. 快速调试：

   - 无需配置：直接打开 JS 文件 → 按 `F5` → 选择 "Node.js" 快速启动

4. 调试异步代码：

   - 在 `Promise`/`async` 函数内部设置断点，支持 `await` 单步跟踪