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 默认也不强制禁用缓存。你看到的可能是上一轮执行的残留结果，不是当前代码的真实行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 刷新时按
Ctrl+F5（Windows）或Cmd+Shift+R（Mac）硬重载，跳过缓存 - Chrome DevTools →
Network标签 → 勾选Disable cache（仅在 DevTools 打开时生效） - 在
Live Server配置中加缓存头：打开 VS Code 设置 → 搜索live server config→ 编辑settings.json，加入："liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --disable-cache --incognito"
调试移动端 H5 页面时，Chrome 远程调试连不上？
VS Code 本身不提供真机远程调试能力，必须靠 Chrome 的 Remote Debugging 功能桥接。常见失败原因是 USB 调试未开启、设备未授权、或 Chrome 版本与手机系统不匹配（如 Android 14 需 Chrome 120+）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 手机开启开发者模式 → 打开 USB 调试 → 用 USB 连电脑 → 在 Chrome 地址栏输入
chrome://inspect→ 点击Configure...→ 添加localhost:5500（或你Live Server的端口） - 确保手机和电脑在同一局域网，并用
http://[电脑IP]:5500访问（例如http://192.168.1.100:5500），而不是localhost - VS Code 中不要依赖 “调试” 按钮跑 H5，它默认启动的是 Node.js 调试器，对纯前端无效
真正卡住人的，往往不是语法写错，而是协议、缓存、跨域、源码映射这四层“透明墙”——它们不报错，却让 console 和断点彻底失能。动手前先看一眼地址栏协议和 Network 面板的 status code，比反复刷新快得多。
