Visual Studio Code中是否有Express框架调试工具？

浏览器端（Chrome/Firefox通用） #

• 打开开发者工具：按下F12或Ctrl+Shift+I（Windows）/Cmd+Opt+I（Mac）
• 切换到Sources（Chrome）或调试器（Firefox）面板
• 定位到目标代码文件，点击行号左侧空白区域即可设置断点（行号旁会出现彩色标记）
• 触发代码执行（如刷新页面、点击触发按钮），程序会自动在断点处暂停
• 用快捷键或调试工具栏控制执行：
  • 步过（F10）：执行当前行，不进入调用的函数内部
  • 步入（F11）：进入当前行调用的函数体
  • 步出（Shift+F11）：从当前函数回到调用它的代码处
  • 继续（F8）：恢复执行，直到遇到下一个断点

VS Code本地代码调试 #

• 打开项目后，找到目标代码文件，点击行号左侧设置断点（显示红色圆点）
• 按Ctrl+Shift+D打开运行和调试面板
• 点击「创建launch.json文件」，选择对应运行环境（如Node.js、Chrome）
• 点击绿色启动按钮开始调试，通过面板按钮或上述快捷键控制执行流程

实用进阶技巧 #

• 条件断点：右键断点标记，设置触发条件（如user.id === 100），仅当条件满足时才暂停
• 日志断点：右键断点标记选择「添加日志点」，输入要打印的内容（如当前循环值: ${index}），程序执行时会在控制台输出日志但不会暂停
• 实时查看变量：调试暂停时，在「作用域」面板可查看当前所有变量的值，也可直接在控制台输入变量名查询

内容的提问来源于stack exchange，提问作者1.21 gigawatts