VS Code 直接打开 HTML 文件控制台无输出，因浏览器以 file:// 协议加载，禁用 fetch、localStorage 等 API；应使用 Live Server 插件启动 http://127.0.0.1:5500 服务，并确保地址栏为 http:// 或 https:// 开头。
VS Code 里直接打开 HTML 文件，F12 控制台为什么没输出？
因为 VS Code 本身不运行 Web 服务器，双击或用 Open with Live Server 以外的方式打开 index.html，浏览器是以 file:// 协议加载的。此时绝大多数现代浏览器（Chrome、Edge、Firefox）会禁用 console.log 以外的很多 API，比如 fetch、localStorage、Service Worker，甚至部分 import 语句都会报 CORS 或 Blocked loading resource 错误——不是控制台“没信息”，而是脚本压根没执行成功。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 务必安装插件
Live Server（作者 Ritwick Dey），右键 HTML 文件 →Open with Live Server，它会起一个本地http://127.0.0.1:5500/服务 - 不要双击 HTML 文件，也不要拖进浏览器地址栏（那还是
file://） - 检查浏览器地址栏：必须是
http://或https://开头，而非file:///
VS Code + 浏览器联调时，断点不触发、console 不同步怎么办？
常见于用了 Live Server 但源码映射（source map）没配好，或 JS 是动态加载/模块化引入的。Chrome DevTools 默认只对直接 的文件自动映射，遇到 import、async 加载、构建产物（如 dist/main.js）就容易失联。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 JS 文件顶部加一行注释：
// @ts-check（如果用 TypeScript）或确保有正确的sourceMappingURL注释（如//# sourceMappingURL=main.js.map） - Chrome 中按
F12→Sources标签 → 左侧文件树点开localhost:5500→ 找到你的原始.js文件（不是压缩后的），右键 →Add folder to workspace，再设断点 - 若用 ES Module，确保
，且路径是相对 URL（./utils.js），不能是file://绝对路径
为什么改了 HTML/JS，刷新后控制台还是旧输出？
浏览器缓存了 JS、CSS 或整个页面，尤其当响应头没带 Cache-Control: no-cache 时，Live Server 默认也不强制禁用缓存。你看到的可能是上一轮执行的残留结果，不是当前代码的真实行为。
