首先配置VS Code并安装Debugger for Chrome、ESLint和Node.js Extension Pack，然后在.vscode/launch.json中添加对应浏览器或Node.js的调试配置，通过设置断点、使用debugger语句、监视变量及调用堆栈实现高效调试，启用自动附加可简化npm script调试流程。
调试JavaScript和Node.js应用在VS Code中非常高效，借助内置的调试功能和插件支持，可以快速定位问题。下面介绍具体配置和操作方法。
配置VS Code调试环境
确保你已安装最新版的VS Code，并推荐安装以下扩展以增强体验：
- Debugger for Chrome：用于调试浏览器中的JavaScript
- ESLint：代码规范检查
- Node.js Extension Pack：包含常用Node.js开发工具
这些扩展能提升调试效率，尤其是跨环境调试时。
调试浏览器中的JavaScript
前端代码通常运行在浏览器中，VS Code可通过Chrome调试器连接页面。
立即学习“Java免费学习笔记（深入）”；
步骤如下：
示例配置：
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
保存后点击“运行和调试”侧边栏中的“运行”按钮即可。
调试Node.js后端应用
调试服务器端脚本更直接，VS Code可以直接启动并监控Node进程。
常见做法：
- 在launch.json中添加Node启动配置
- 指定入口文件（如app.js或server.js）
- 设置环境变量或参数（可选）
示例配置：
{
"name": "Debug Node.js App",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/app.js",
"console": "integratedTerminal"
}
这样启动后，可在代码中设断点、查看变量、单步执行。
实用调试技巧
掌握一些小技巧能让调试更高效：
- 使用debugger语句插入代码，自动触发断点
- 在“监视”面板添加表达式，实时查看变量值
- 利用“调用堆栈”面板追踪函数调用路径
- 启用“自动附加”功能，调试npm script更方便
对于Express等框架，建议在开发模式下配合--inspect标志启动。
基本上就这些。配置一次launch.json后，后续调试只需点几下。关键是理解不同运行环境对应的调试类型，然后正确指向目标脚本或页面。不复杂但容易忽略细节。
