VS Code 通过 Debugger for Edge/Chrome 扩展调试浏览器中运行的 JavaScript，需配合本地 HTTP 服务（如 live-server）和正确配置 launch.json，断点仅在浏览器执行时触发，不支持直接运行 JS 文件。
VS Code 本身不直接运行或调试浏览器端 JavaScript，它需要配合浏览器（通常是 Chrome 或 Edge）和插件协作完成。关键不是“在 VS Code 里执行 JS”，而是“用 VS Code 控制浏览器调试 JS”。
安装并启用 Debugger for Edge 或 Debugger for Chrome
这两个是官方维护的调试器扩展，必须安装其一（推荐 Debugger for Edge，因 Edge 基于 Chromium，兼容性更好且更新更及时）。安装后无需额外配置即可识别本地 HTML 文件中的 。
- 打开 VS Code 扩展市场，搜
Debugger for Edge，点击 Install - 确保系统已安装 Microsoft Edge（或 Chrome），调试器依赖其远程调试协议
- 重启 VS Code 后，打开任意含
的.html文件，按Ctrl+Shift+P输入 “Debug: Open Configuration”，选择 “Edge” 或 “Chrome” 自动生成.vscode/launch.json
配置 launch.json 启动浏览器并加载页面
默认生成的配置通常指向 index.html，但容易出错的点在于路径和端口——VS Code 不起 HTTP 服务，所以不能用 file:// 协议调试某些 API（如 fetch、Service Worker），必须走 http://。
- 推荐使用
"url": "http://localhost:8080"+ 配合轻量服务器（如live-server） - 若坚持用
"file://"，需加"webRoot": "${workspaceFolder}"显式声明根目录，否则断点不命中 - 添加
"runtimeExecutable": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"（Windows 路径需转义）可指定 Edge 安装位置，避免找不到浏览器
在 JS 中打断点并启动调试会话
断点只在浏览器实际执行到该行时触发，不是“运行 JS 文件”就停住。常见误操作是右键 HTML 文件 → “Open in Default Browser”，这绕过了 VS Code 调试流程，断点完全无效。
立即学习“Java免费学习笔记（深入）”；
- 确保当前打开的是
.html文件（不是单独的.js），光标在其中 - 按
F5启动调试（或点击左侧调试图标 → 绿色三角形），VS Code 会自动拉起 Edge 并打开页面 - 在
内或外部 JS 文件中单击行号左侧设断点；若断点变为空心圆，说明未加载到源码（检查webRoot或是否用了构建工具导致路径映射失败） - 修改代码后需手动刷新浏览器（
F5），VS Code 不自动热重载前端页面
调试外部引入的 JS 文件（如 script src="xxx.js"）
这类文件默认不会被 VS Code 自动关联源码，断点可能不生效，尤其当 JS 经过压缩或构建（如 Webpack）后更明显。
- 确保外部 JS 与 HTML 在同一域名下（同为
http://localhost:8080），否则跨域禁止调试 - 如果 JS 是本地文件（如
src="js/main.js"），检查launch.json中"webRoot"是否覆盖该路径 - 遇到 minified 代码，优先查是否有对应
.map文件，并确认服务器返回了正确的SourceMap响应头（Content-Type: application/json不影响，但X-SourceMap或SourceMap响应头需存在）
真正卡住人的往往不是“怎么点开调试”，而是路径没对上、协议用错了 file://、或者以为调试器能直接执行 JS 文件——它只调试浏览器里跑的 JS。只要浏览器 DevTools 能看到的脚本，VS Code 就能连上；反之，连 DevTools 都看不到的，先解决资源加载问题再说。
