Node.js + Chrome DevTools 完整联调详细步骤

本地调试（Node + Chrome DevTools 标准流程）

步骤 1：终端启动 Node 并开启调试监听

1. 打开终端（CMD/PowerShell/ 终端），进入 demo.js 所在文件夹
2. 
3. 注意：要在代码编辑区右键，“打开于”->"终端"，然后才会打开正确的终端，如下所示：
4. 
5. 执行启动命令（二选一）：
   • 普通调试（代码正常运行，遇到断点暂停）：
      

     node --inspect demo.js

   • 首行暂停（代码执行前直接断住，适合调试初始化逻辑）推荐新手：
      

     node --inspect-brk demo.js

      
6. 终端输出示例（代表启动成功）：

   Debugger listening on ws://127.0.0.1:9229/xxxx-xxxx-xxxx
   For help, see: https://nodejs.org/en/docs/inspector

   默认调试端口：9229
7. 

步骤 2：Chrome 连接调试器

1. 打开 Chrome 浏览器，地址栏输入：
    

   chrome://inspect

   

   我使用的是微软的Edge浏览器。

    
2. 进入 Inspect devices 页面，分两种连接方式：

   方式 A：专用调试窗口（推荐）

   页面顶部点击 Open dedicated DevTools for Node，直接打开独立调试面板。

   方式 B：手动选择目标

   下滑找到 Remote Target 区域，能看到 demo.js + 127.0.0.1:9229

    

   点击后方 inspect，弹出 DevTools 调试窗口。

   

   注意：这个窗口要等待一段时间才会跳出来。

   

    

步骤 3：Sources 面板核心调试操作

调试窗口默认定位到 Sources 面板（调试主界面），分三大区域：

1. 左侧文件列表
   • 展开 file://，找到并点开 demo.js，代码展示在中间编辑区。
2. 中间代码区（断点操作）
   • 行号断点：点击代码左侧行号，出现蓝色箭头 = 断点生效；再次点击取消。
      
     示例：在 let b = x * 2; 这一行打个断点。
   • 代码内硬断点：在代码中写入 debugger;，运行到此行自动暂停：

     function calc(x) {debugger; // 自动断点let b = x * 2;
     }

      
   • 条件断点：右键行号 → Add conditional breakpoint，输入表达式（例：x>10），仅条件成立时暂停。
3. 右侧调试控制区 + 变量区

    

   顶部一排按钮（附快捷键，Windows/Linux）：
   表格

   按钮	功能	快捷键
   ▶️ 继续执行	跳到下一个断点	F8
   ⏭️ 单步跳过	执行当前行，不进入函数内部	F10
   ⏬️ 单步进入	进入当前行调用的函数内部	F11
   ⏫️ 单步跳出	跳出当前函数，回到上层调用处	Shift+F11
   ⏹️ 强制暂停	任意时刻中断代码执行	-

   下方区域：
   • Watch：手动添加变量 / 表达式，实时查看值（点击 + 输入 a、b）
   • Call Stack：调用栈，查看代码执行链路
   • Scope：作用域，自动展示当前局部变量、全局变量

步骤 4：实操调试流程（跟着走一遍）

1. 代码停在断点处，在 Scope 里查看 x=20、外层 a=10
2. 按 F10 单步执行，观察 b 被赋值为 40
3. 再按 F10，c 赋值为 50
4. 按 F8 继续运行，代码走完，终端输出 结果：50
5. 调试完成，关闭 DevTools，终端按 Ctrl+C 终止 Node 进程。