可使用VSCode集成Chrome、Edge或Web Server for Chrome进行JavaScript调试：一、安装Debugger for Chrome扩展并配置launch.json指向本地HTML；二、VSCode 1.80+原生支持Edge，配置runtimeExecutable路径即可；三、用Web Server for Chrome启HTTP服务，避免file://协议限制。
如果您在浏览器中运行JavaScript代码时遇到问题，需要实时查看变量值、设置断点或逐步执行代码，则可以利用VSCode与浏览器的调试集成功能进行高效调试。以下是实现此目标的具体步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、使用Chrome调试扩展配合VSCode
该方法通过VSCode内置的Debugger for Chrome扩展与本地Chrome浏览器建立WebSocket连接，使VSCode能接管浏览器的调试会话，直接在编辑器中设置断点并查看调用栈。
1、在VSCode扩展市场中搜索并安装Debugger for Chrome扩展。
立即学习“Java免费学习笔记（深入）”；
2、确保本地已安装Google Chrome浏览器，并将其更新至最新稳定版。
3、在VSCode中打开包含HTML和JavaScript文件的项目文件夹。
4、点击左侧活动栏中的调试图标，然后点击“创建launch.json文件”，选择Chrome环境。
5、在生成的.launch.json文件中，将configurations数组内对象的url字段修改为本地HTML文件路径，例如：file:///Users/username/project/index.html。
6、在JavaScript代码中点击行号左侧设置断点，按Ctrl+Shift+D（Windows/Linux）或Cmd+Shift+D（macOS）切换到调试视图，点击绿色三角形启动调试。
二、启用VSCode内置的Edge调试支持
VSCode 1.80+版本原生支持Microsoft Edge调试，无需额外安装扩展，仅需配置launch.json指向Edge可执行路径，即可直接调试Edge中加载的页面。
1、确认系统已安装Microsoft Edge浏览器。
2、在VSCode中打开项目，进入调试面板，创建新的launch.json配置文件。
3、选择Edge作为调试环境，VSCode将自动生成对应配置。
4、在configurations中添加或修改runtimeExecutable字段，值设为Edge的本地安装路径，例如：/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge。
5、将webRoot字段设为当前工作区根目录，确保源码映射正确解析。
6、保存配置后，按F5启动调试，Edge将自动启动并加载指定页面，断点立即生效。
三、通过Web Server for Chrome提供本地服务再调试
当JavaScript依赖相对路径资源或需跨域请求时，直接以file://协议打开HTML会导致调试失败；此时需借助本地HTTP服务，使页面以http://localhost方式运行，从而满足调试器的源码映射要求。
1、在Chrome应用商店安装Web Server for Chrome应用。
2、启动该应用，点击“Choose folder”选择包含HTML和JS文件的目录。
3、开启服务器，记录其分配的端口号，例如：http://127.0.0.1:8887。
4、在VSCode的launch.json中，将url字段替换为该本地地址，如：http://127.0.0.1:8887/index.html。
5、确保launch.json中的webRoot字段与所选文件夹路径一致。
6、启动调试会话，VSCode将连接到该HTTP服务下的页面并加载源码地图。
