VS Code 本身不运行 HTML，双击或拖入浏览器走 file:// 协议会因浏览器安全策略导致 fetch、ES 模块、相对路径等报错；必须用 Live Server 插件启动本地 HTTP 服务（如 http://127.0.0.1:5500）才能正常运行。
直接在 VSCode 里打开 index.html 为什么没反应？
浏览器双击打开或拖进浏览器能看，但用 VSCode 右键“Open with Live Server”才真正启动本地服务——因为现代 HTML（尤其含 fetch、import、localStorage）受同源策略限制，file:// 协议下多数 API 会静默失败，比如控制台报 Access to script at 'file:///...' from origin 'null' has been blocked。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 安装官方扩展
Live Server（作者：Ritwick Dey），重启 VSCode 后右键 HTML 文件 →Open with Live Server - 不要用 VSCode 内置的
Preview功能（它走file://），也不要用右键“Reveal in Finder/Explorer”再双击 - 端口默认是
5500，可在设置中改liveServer.settings.port，但别设成80或443（需管理员权限）
F5 启动调试时提示 “Cannot find runtime executable” 怎么办？
VSCode 的 Debugger for Chrome / Edge 扩展不自动识别浏览器路径，尤其 macOS 或自定义安装路径的 Windows 用户容易卡在这步。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先装好
Debugger for Chrome或Debugger for Edge（推荐后者，Edge 基于 Chromium 且更新更稳） - 在项目根目录建
.vscode/launch.json，内容必须包含"type": "pwa-msedge"（Edge）或"type": "pwa-chrome"（Chrome），且指定"request": "launch"和"url" - 关键字段示例：
{ "configurations": [{ "type": "pwa-msedge", "request": "launch", "name": "Launch Edge against localhost", "url": "http://localhost:5500", "webRoot": "${workspaceFolder}" }] } - 如果 Edge 不在默认路径（如 macOS 安装在
/Applications/Microsoft Edge.app），需加"runtimeExecutable": "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge"
断点打了但没停住？检查这三个地方
前端调试断点失效，90% 是脚本加载时机或 sourcemap 问题，不是 VSCode 设置错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认 HTML 中 JS 是内联还是外链：外链 JS 必须用
<script src="xxx.js"></script>，不能写成<script src="xxx.js"/>（XHTML 写法不被浏览器执行） - 如果用了构建工具（Vite、Webpack），确保开发模式开启 sourcemap：
build.sourcemap: true（Vite）或devtool: 'source-map'（Webpack） - VSCode 调试器只认
.js文件里的断点；若在.ts或.jsx里打点，必须有正确映射，且launch.json中"webRoot"指向源码目录（不是dist）
想改完 HTML/JS 立刻看到效果，但不想每次手动刷新？
Live Server 默认不支持热重载（HMR），只做页面刷新；要实现保存即更新 DOM/状态，得靠额外工具链。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 小项目：用
Live Server+ 浏览器插件Auto Refresh Plus（设间隔 500ms），简单粗暴 - 中等项目：迁移到
Vite，执行npm create vite@latest，选vanilla模板，运行npm run dev后自动启用 HMR 和 ES 模块支持 - 注意：Vite 的
index.html是入口，所有 JS 必须通过<script type="module">加载，否则 HMR 不生效
main.js，实际浏览器加载的是缓存的旧版本，或者构建产物里的混淆名。每次怀疑调试失灵，先清浏览器缓存 + 关掉所有其他标签页，再试。 
