VSCode无法直接运行HTML，必须通过浏览器加载；要调试JS需用VSCode启动浏览器并配置launch.json指向http://服务地址（如http://localhost:5500/index.html），配合Live Server等工具，确保断点生效且源码路径正确映射。
VSCode 无法直接运行 HTML，必须靠浏览器加载
HTML 是静态标记语言，VSCode 本身不解析或执行它。所谓“运行 HTML”，本质是让 Chrome/Edge 加载该文件并执行其中的 <script>。如果你右键 HTML 文件 → “Open with Live Server” 或直接双击用浏览器打开，alert()、console.log() 都能执行，但断点不会生效——因为没走 VSCode 的调试通道。
要单步调试 JS，必须满足两个前提：① 浏览器由 VSCode 启动并接管调试协议；② JS 代码被浏览器实际加载并执行。常见错误是：配置了 launch.json 却仍用鼠标双击打开 HTML，此时 VSCode 完全不知情，断点只是灰色空心圆。
必须用 HTTP 服务（不能只靠 file://）
直接用 file:///path/to/index.html 启动时，Chrome 会禁用 fetch、localStorage、Service Worker 等 API，且 VSCode 很可能无法正确映射源码路径，导致断点“设上了但不命中”。
- 推荐方案：在
launch.json中使用"url": "http://localhost:5500/index.html"，配合Live Server插件（默认端口 5500） - 替代方案：用
npx http-server -p 8080启服务，再把url改成"http://localhost:8080/index.html" - 若坚持用
file://，必须显式加"webRoot": "${workspaceFolder}"，且仅限最简单脚本（无跨域、无构建工具）
launch.json 配置关键字段不能错
VSCode 调试依赖 .vscode/launch.json 中的字段精准匹配运行环境。以下是最小可用配置（以 Edge 为例，Chrome 类似）：
立即学习“前端免费学习笔记（深入）”；
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Edge",
"type": "edge",
"request": "launch",
"url": "http://localhost:5500/index.html",
"webRoot": "${workspaceFolder}",
"sourceMaps": true
}
]
}
容易踩坑的点：
-
type必须是"edge"或"chrome"，不是"node"（那是跑 Node.js 的） -
url必须是http://开头，且端口与你本地服务一致；file://路径要写全，如"file:///C:/project/index.html"（Windows） -
webRoot告诉调试器“源码根目录在哪”，若 JS 是从src/目录引入的，但webRoot指向错，断点就找不到对应行 -
sourceMaps设为true才能在压缩/构建后的 JS 中回溯到原始.ts或.js文件（开发阶段可先关掉）
断点只在浏览器执行到那行时触发
设置断点后按 F5，VSCode 会拉起 Edge 并加载页面。但断点是否生效，取决于 JS 是否真的运行到了那行——比如：
- 放在
<head>里的<script>，若操作document.body，会因 DOM 未加载而报错，断点根本没机会触发 - 异步代码（
setTimeout、fetch回调）中的断点，需等事件循环走到那一步才会停住 - 外部 JS（
<script src="app.js"></script>）若路径 404，控制台报错，断点自然不生效 - 断点显示为空心圆（●），说明源码未加载成功；实心红点（●）才表示已就绪
调试过程中修改 JS 代码，必须手动刷新浏览器（F5），VSCode 不会自动重载页面——这是和 Live Server 热更新完全不同的机制。
