VSCode中HTML内联脚本可调试需启用debug.allowBreakpointsEverywhere选项，并配合Live Server运行；外部JS文件调试需确保在webRoot范围内且禁用浏览器缓存。
VSCode 本身不执行 JavaScript，HTML 里的 script 能否运行，取决于你用什么方式打开它——直接双击或右键用浏览器打开，alert 会弹，但 AJAX、fetch、localStorage 等受 file:// 协议限制的功能大概率失败；而用本地服务器（如 Live Server）启动，才能真正模拟生产环境行为。
Live Server 是最稳的 HTML+JS 运行方式
它起一个 http://127.0.0.1:5500/ 类似的本地服务，绕过浏览器对 file:// 的安全拦截，所有 JS API 都能正常调用。
- 必须安装扩展：在 VSCode 扩展市场搜
Live Server（作者 Ritwick Dey），装完重启编辑器更稳妥 - 确保 HTML 文件已保存（比如叫
index.html），且<script></script>标签位置合理——推荐放在</body>前，避免 DOM 元素未加载就执行 JS - 右键编辑器中的 HTML 文件内容（不是资源管理器里右键），选
Open with Live Server；如果没出现，说明没正确打开该文件，或插件未激活 - 首次运行后，VSCode 右下角会显示端口号（如
5500），浏览器自动打开；之后改代码 →Ctrl+S→ 页面自动刷新，无需手动刷新
想在 HTML 文件里直接打断点调试 JS？得开个开关
默认 VSCode 不允许在 .html 文件的 <script> 块中设断点，哪怕你已配好 Debugger for Chrome/Edge。这是安全限制，不是 bug。
- 按
Ctrl+,（Windows/Linux）或Cmd+,（macOS）打开设置，搜索debug.allowBreakpointsEverywhere - 勾选
Allow setting breakpoints in any file—— 这个选项控制的就是“能否在 HTML 的内联脚本里打红点” - 勾选后，把光标停在
<script>块某行左侧空白处，点击即可加断点；若仍显示“未验证的断点”，检查是否已启动 Live Server 并在浏览器中打开了页面（调试器需连接到真实运行的实例）
Debugger for Chrome/Edge 启动调试前必须确认三件事
很多“F5 没反应”“连不上 localhost”的问题，都卡在这三个地方没对上。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
立即学习“前端免费学习笔记（深入）”；
-
launch.json必须在工作区根目录下：不能只打开单个index.html文件就点调试，得用 VSCode 打开整个文件夹（File → Open Folder） -
url字段要匹配 Live Server 实际地址：比如 Live Server 启的是http://127.0.0.1:5501/index.html，那launch.json里就得写"url": "http://127.0.0.1:5501/index.html"，端口错一位都不行 - Chrome/Edge 必须是干净启动：调试时不要提前手动打开同端口的页面，否则调试器可能连不上；建议关闭所有 Chrome/Edge 窗口再点 F5
别忽略 webRoot 和 sourceMaps 这两个配置项
它们看着不起眼，但决定你能不能看到原始 JS 行号、能不能在修改过的文件里准确停住。
-
webRoot应设为"${workspaceFolder}"，告诉调试器“源码从哪开始映射”；如果项目结构是/project/src/index.html，但webRoot指向了/project，断点就可能偏移 -
sourceMaps默认true即可，但如果你用了构建工具（如 Vite、Webpack），生成了.map文件，就得确保路径正确，否则断点会落在压缩后代码上 - 外部引入的 JS（如
<script src="main.js"></script>）也能调试，前提是该文件在webRoot范围内且没被浏览器缓存（可关掉 DevTools 的 “Disable cache”）
最常被跳过的其实是“打开整个文件夹”和“检查端口是否一致”这两步——很多人反复重装插件、改 launch.json，却没意识到 VSCode 调试只认工作区，不认单文件。
