首先配置VSCode调试环境，安装Node.js及浏览器调试扩展，创建.launch.json文件定义Node.js和Chrome调试配置；接着在代码中设置断点，通过F5启动调试，程序暂停时可查看变量、执行表达式、单步执行；利用监视窗口、条件断点、调用堆栈等技巧提升效率，确保路径正确且服务已启动，即可高效调试JavaScript代码。
调试 JavaScript 代码是开发中非常关键的一环。VSCode 内置强大的调试功能，配合 Node.js 或浏览器环境，能让你快速定位问题。下面介绍如何使用 VSCode Debugger 调试 JavaScript 代码。
配置调试环境
要开始调试，先确保你已经安装了 VSCode 和 Node.js。如果调试的是前端代码，建议同时安装 Debugger for Chrome 或 Microsoft Edge: DevTools 扩展。
在项目根目录下创建 .vscode 文件夹，并添加 launch.json 配置文件：
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "调试 Node.js", "program": "${workspaceFolder}/app.js" }, { "type": "pwa-chrome", "request": "launch", "name": "调试 Chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" } ] }这个配置支持调试 Node.js 后端脚本和前端页面。
立即学习“Java免费学习笔记（深入）”；
设置断点与启动调试
打开你要调试的 JavaScript 文件，在行号左侧点击即可设置断点。断点处会显示一个红点。
按 F5 启动调试，或点击侧边栏的“运行和调试”图标，选择对应的配置项。
程序执行到断点时会自动暂停，此时你可以：
- 查看当前作用域内的变量值
- 在“调试控制台”中执行表达式
- 单步执行（F10 跳过，F11 进入函数）
- 观察特定变量或表达式的变化
调试技巧与实用功能
VSCode 提供了一些高效调试的小技巧：
- 右键变量选择“添加到监视”，可实时跟踪其值
- 使用 条件断点：右键断点，设置触发条件，比如只在 i === 5 时中断
- 调试异步代码时，启用“调用堆栈”面板查看执行流程
- 在 launch.json 中设置 stopOnEntry 为 true，可让程序一启动就暂停
基本上就这些。只要配置好 launch.json 并合理使用断点和控制台，调试 JavaScript 就变得直观又高效。不复杂但容易忽略细节，比如路径错误或端口未开启。确保目标脚本能运行，调试才能顺利进行。
