VS Code不直接运行HTML/JS，需通过HTTP服务（如Live Server插件或serve命令）避免file://协议的安全限制；配置端口、根目录和source map路径是关键。
VS Code 本身不直接运行 HTML/JS，所谓“用浏览器运行代码”，本质是把文件路径交给浏览器打开——关键在路径正确、服务可用、刷新及时。
为什么直接双击 HTML 文件有时不工作
本地双击打开的 file:// 协议会触发浏览器安全限制：比如 fetch 请求被拒、localStorage 在某些版本中失效、模块脚本（type="module"）报 CORS 错误。这不是 VS Code 的问题，而是浏览器对本地文件的默认策略。
- 开发阶段应尽量走
http://localhost:xxx，哪怕只是静态服务 - VS Code 的 Live Server 插件就是干这个的：起一个最小 HTTP 服务，自动打开浏览器并监听文件变化
- 别依赖“右键 → Open with Live Server”就万事大吉——它默认端口可能被占，或项目根目录选错
Live Server 插件怎么配才不踩坑
装完插件后，右键 HTML 文件点 Open with Live Server，它默认会：
- 从当前文件所在目录启动服务（不是工作区根目录）
- 用随机空闲端口（如
http://127.0.0.1:5500），但可手动指定："liveServer.settings.port": 3000写进.vscode/settings.json - 默认不支持 HTTPS；若需测试
Service Worker或Geolocation，得自己配https或用其他工具（如serve） - 它不会自动代理 API 请求——前端调后端接口时，仍要配
proxy或用后端服务同源
不用插件，命令行快速起服务的替代方案
当 Live Server 启动失败、端口冲突，或你只想验证一个文件是否能跑通，用命令行更可控：
- 确保已安装 Node.js，然后全局装
serve：npm install -g serve - 进项目根目录，运行：
serve -s .（-s表示单页应用模式，适合 React/Vue 路由） - 或者只服务当前文件夹：
serve .，它会输出类似http://localhost:3000的地址 - 注意：
serve默认不热重载，改完要手动刷新；而 Live Server 是自动的
调试 JS 时浏览器打不开源码映射怎么办
你在 VS Code 里打断点，但浏览器开发者工具里看不到原始 .ts 或 .jsx 文件？那是因为没生成 source map 或路径没对上。
- 确认构建工具（如
webpack、vite）开启了sourceMap: true - 检查生成的
.js.map文件是否和.js同目录，且//# sourceMappingURL=xxx.js.map路径可访问（file://下常 404，必须走 HTTP 服务） - VS Code 的
Debugger for Chrome插件已停更，推荐直接用内置的Node.js Debug Terminal或浏览器原生调试
真正卡住人的往往不是“怎么打开”，而是“打开后行为不对”——比如 AJAX 失败、路由 404、断点不命中。这时候得看协议、看控制台报错、看 Network 面板的真实请求地址，而不是反复重装插件。
