应使用 live server 插件启动 http 服务（如 http://127.0.0.1:5500），而非 file:// 协议，因后者被浏览器安全策略限制，导致 import、fetch、service worker 等功能失效且控制台错误不准确或不显示。
直接在 VSCode 里双击或右键“Open in Default Browser”打开 HTML 文件，console.log 能看到，但绝大多数控制台错误（比如 import 报错、跨域请求失败、fetch 拒绝连接）根本不会触发——因为浏览器用的是 file:// 协议，不是 HTTP 服务，安全策略直接拦死。
为什么控制台报错不显示或不准
常见现象：点击链接跳转 about.html 后空白页，F12 打开控制台只看到 net::ERR_FILE_PROTOCOL；ES Module 的 import 报 Failed to resolve module specifier；Ajax 请求返回 CORS error。这些都不是你代码写错了，而是 file:// 协议天然禁止模块加载、本地 AJAX、Service Worker 等功能。
-
file://下所有脚本都运行在“无源”（opaque origin）环境，浏览器主动禁用现代 Web API - Live Server 启动的是
http://127.0.0.1:5500/这类真实 HTTP 服务，绕过协议限制 - Chrome 调试配置里如果只设了
"file": "${workspaceFolder}/index.html"，它仍走file://，控制台照样没用
必须用 Live Server 启动才能看真实控制台报错
Live Server 是目前最轻量、最可靠的方式，它默认监听文件变更并自动刷新，更重要的是——它提供标准 HTTP 环境，让控制台报错回归真实开发场景。
- 安装插件后，确保你已通过
File → Open Folder打开了整个项目文件夹，而不是单个.html文件 - 右键编辑器里的 HTML 文件（不是资源管理器里），选
Open with Live Server；如果菜单不出现，说明插件未激活或没打开文件夹 - 浏览器地址栏必须是
http://127.0.0.1:5500/about.html这类格式，不是file:///开头 - 多页面跳转时，所有
<a href="...>%20%E5%BF%85%E9%A1%BB%E7%94%A8%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%EF%BC%8C%E4%BE%8B%E5%A6%82%20href=" about.html> 或 <code>href="./pages/contact.html"，不能写href="/about.html"（会 404）
调试时别关掉浏览器 DevTools 的 Network 和 Console 标签页
Live Server 启动后，F12 打开开发者工具，重点盯住两个地方：
-
Console标签页：JS 执行错误、console.error、模块解析失败都会在这里原样报出 -
Network标签页：检查 JS/CSS/JSON 加载是否 404，确认路径是否拼错（比如把script.js写成scrpt.js） - 如果用了
import，确保<script type="module"></script>存在，且被引入的文件后缀是.js（不能是.mjs，Live Server 默认不识别） - 修改 HTML 后保存，Live Server 会自动刷新页面——但如果 JS 语法错误导致页面卡死，刷新可能不生效，此时需手动 F5 或重开标签页
真正容易被忽略的点是：Live Server 的根目录就是你 Open Folder 的那个文件夹，所有路径都相对于它算；哪怕你只改了一个 src 属性，只要路径不对，Network 里立刻 404，但 Console 可能只报“failed to load module”，不提示具体缺哪个文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
