Live Server 是专为纯 HTML/CSS/JS 项目设计的本地开发服务器，能彻底解决 file:// 协议下 fetch、ES 模块导入等被拦截问题，需通过“打开文件夹”后右键 HTML 文件启动，端口和主机可配置，不适用于 Vite/Webpack 等框架项目。
Live Server 是唯一能真正解决 HTML 预览问题的工具，其他方式要么绕过关键限制、要么只适合极简验证。
为什么不能双击或右键“在浏览器中打开”
浏览器对 file:// 协议做了硬性限制：所有 fetch 请求、import ES 模块、XMLHttpRequest 加载同目录资源，都会被拦截，报错类似 net::ERR_FILE_PROTOCOL 或 CORS error。这不是你代码写错了，是协议本身不支持跨文件资源加载。
- Edge 在 Windows 默认设置下会静默禁用 JS（尤其含
localStorage或模块导入时） - 路径含中文或空格，部分旧插件解析失败（Live Server 已修复，但
Open in Browser等轻量插件可能挂） - 你以为“保存就生效”，结果刷新没变——其实是缓存，或根本没触发重载逻辑
Live Server 怎么装、怎么用、怎么调端口
必须安装 Ritwick Dey 原版插件，且操作有严格前提：用“文件→打开文件夹”建立工作区，右键已保存的 .html 文件（不是资源管理器里右键，也不是未保存的 Untitled-1），才能看到 Open with Live Server 选项。
- 状态栏右下角的
Go Live按钮，只对当前已打开的 HTML 文件生效 - 默认地址是
http://127.0.0.1:5500/xxx.html；端口被占时会自动换，但建议主动配：Ctrl+,→ 搜liveServer.settings.port→ 改成3000等常用值 - 想让手机连同一 Wi-Fi 查看？设
liveServer.settings.host为0.0.0.0 - 项目根目录不是当前文件所在目录？改
liveServer.settings.root，填相对路径如"./src"
调试 JS 时 launch.json 必须改这三处
VSCode 默认的 Chrome 调试配置想找 http://localhost:8080，但 Live Server 启的是 http://127.0.0.1:5500，不改就断连。别抄网上旧配置，直接用这个最小可用版：
立即学习“前端免费学习笔记（深入）”；
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Live Server",
"url": "http://127.0.0.1:5500/index.html",
"webRoot": "${workspaceFolder}",
"sourceMaps": true
}
]
}
-
url必须和 Live Server 实际启动地址一致（注意端口、路径） -
webRoot指向工作区根，否则断点打不进 JS 文件 - 删掉所有带
file://的url字段，它和 Live Server 不兼容
最容易被忽略的是：Live Server 不适用于 Vite/Webpack 或 .vue/.ts 项目——那些场景该用对应框架的 dev server。它专为纯 HTML/CSS/JS 项目设计，越简单，越可靠。
