配置VS Code调试JavaScript和Node.js应用需设置launch.json文件，选择Node.js或浏览器环境，通过断点、变量查看和控制台实现高效排查问题。
在 VS Code 中调试 JavaScript 和 Node.js 应用并不复杂，只要配置得当，你可以轻松设置断点、查看变量、单步执行和排查问题。下面是一份实用且清晰的指南，帮助你在本地高效调试前端脚本和后端 Node.js 服务。
启用调试功能
VS Code 内置了对 JavaScript 调试的支持，无需额外安装插件即可调试浏览器中的脚本或本地运行的 Node.js 程序。
调试入口位于左侧活动栏的虫子图标（运行与调试）。点击后选择“创建 launch.json 文件”来配置调试环境。
- 首次调试时会提示你选择环境：选择 Node.js 或 Chrome（或其他浏览器）
- VS Code 会自动生成 .vscode/launch.json 文件，用于定义调试配置
调试 Node.js 后端应用
要调试一个本地运行的 Node.js 脚本，比如 app.js，可以使用以下 launch.json 配置：
立即学习“Java免费学习笔记（深入）”；
{
"type": "node",
"request": "launch",
"name": "启动应用",
"program": "${workspaceFolder}/app.js",
"console": "integratedTerminal"
}
说明：
- type: 必须为 node
- request: 设置为 launch 表示由 VS Code 启动程序
- program: 指向你的主入口文件
- console: 使用集成终端可看到 console 输出，并支持交互式输入
如果希望连接到一个已经运行的 Node 进程（例如通过 nodemon 启动的服务），可以改为 attach 模式：
{
"type": "node",
"request": "attach",
"name": "附加到进程",
"port": 9229
}
启动 Node 时需加上 --inspect 标志：
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
或监听特定端口：
node --inspect=9229 app.js调试前端 JavaScript（浏览器）
调试运行在浏览器中的页面，可以通过 VS Code 结合 Chrome 或 Edge 实现。
确保已安装 Debugger for Chrome 或 Debugger for Edge 扩展。
常见配置如下：
{
"type": "chrome",
"request": "launch",
"name": "在 Chrome 中打开 index.html",
"file": "${workspaceFolder}/index.html"
}
也可以连接到正在运行的页面（需开启远程调试）：
{
"type": "chrome",
"request": "attach",
"name": "附加到 Chrome",
"port": 9222,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
启动 Chrome 时带上调试端口：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222实用调试技巧
掌握这些技巧能显著提升调试效率：
- 在代码行号旁点击添加断点，红色圆点表示已激活
- 断点触发后，左侧变量面板显示当前作用域内的值
- 使用顶部调试工具栏进行：继续（F5）、单步跳过（F10）、进入函数（F11）、跳出（Shift+F11）
- 在调试控制台中直接输入变量名或表达式，实时查看结果
- 右键断点可设置条件断点，例如只在某个变量等于特定值时中断
- 使用 logpoint（日志断点）打印信息而不暂停执行
基本上就这些。合理配置 launch.json，再结合断点与控制台，就能快速定位大多数 JavaScript 和 Node.js 问题。调试不神秘，关键是动手尝试和熟悉流程。
