Live Server是VS Code中文版唯一开箱即用、保存即刷新且支持本地服务器语义（如正确解析/assets/logo.png）的HTML预览方案；其他工具如Code Runner仅调用系统命令，无HTTP服务与路径处理能力。
Live Server 是最稳的 HTML 浏览器预览方式
不是所有“在浏览器中运行”都等于“能热更新”，Live Server 是目前 VS Code 中文版里唯一开箱即用、保存即刷新、还带本地服务器语义（如 /assets/logo.png 路径能正常解析）的方案。
常见错误现象：装了 Code Runner 或 View in Browser，点一下能打开，但改完 HTML/CSS/JS 后必须手动刷新；或者路径含中文时直接报 404 —— 这些工具本质只是调用系统 open 或 start 命令，不启动 HTTP 服务，也不处理相对路径。
- 安装后右键 HTML 文件 → Open with Live Server，或点击底部状态栏的 Go Live
- 首次运行会自动在
http://127.0.0.1:5500/xxx.html打开，端口可改，但别设成 80 或 443（需管理员权限） - 如果项目有
index.html，它会默认作为入口；没有的话，得手动拼 URL，比如http://127.0.0.1:5500/src/main.html - 中文路径完全没问题，但文件名里避免空格和
#、?等 URL 特殊字符
vscode.dev / github.dev 不是“运行环境”，而是“编辑+轻量预览”
很多人以为在浏览器里打开 vscode.dev 就能像本地一样跑 HTML，其实它没终端、没 Node.js、也没本地服务器能力 —— 它只能编辑，不能执行。
使用场景很明确：临时改一个 GitHub 上的静态页面、快速 review 某个 PR 里的 HTML 变更、或在公共电脑上打开自己仓库看结构。它连 npm 都没有，更别说 Live Server 的后台进程。
- 访问
https://vscode.dev/github.com/username/repo或把 GitHub 页面 URL 里的github.com换成github.dev - 打开 HTML 文件后，右键菜单里只有 Reveal in Explorer 和 Copy Path，没有 Open with Live Server
- 想“运行”，只能右键 → Download 到本地，再用桌面版 VS Code +
Live Server打开
调试 HTML 时别跳过 Chrome Debugger 配置
单纯“打开”和“调试”是两件事。Live Server 解决预览，Debugger for Chrome 才让你在 VS Code 里打断点、看 console.log、查 DOM 变化 —— 但它对配置敏感，错一个字段就启动失败。
容易踩的坑：装完插件直接按 F5，弹出错误 Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222。这是因为 Chrome 没以调试模式启动，不是插件问题。
- 先关掉所有 Chrome 窗口，命令行运行：
chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check - VS Code 中按
Ctrl+Shift+P→ 输入Debug: Open launch.json→ 选Chrome - 生成的
launch.json里，确保"url"指向Live Server启的地址，例如"http://127.0.0.1:5500/index.html"，而不是本地文件路径"file:///..." - 别用
"file"模式调试 —— Chrome 会因安全策略禁掉fetch和模块导入
自建 code-server 或 Codespaces 属于“换平台”，不是“换预览方式”
有人看到“VS Code 在浏览器运行”就去折腾 code-server 或 Codespaces，结果发现还是得装 Live Server 才能预览 HTML —— 这说明它们只是把桌面版 VS Code 搬到网页，底层机制没变，不是替代方案，而是部署形态升级。
性能影响明显：Codespaces 启动要 20–60 秒，依赖 GitHub 的免费配额（每月 60 小时），而 Live Server 本地起服务只要 200ms；code-server 自建虽可控，但得维护 Docker、HTTPS、密码认证，日常写个 demo 大材小用。
- 除非你同时需要：远程协作 + 终端跑
npm run dev+ 后端联调 + 持久化 Git 提交，否则没必要上这类环境 - Codespaces 默认不装
Live Server，首次打开要手动从扩展市场搜并安装（注意勾选Install in Remote） -
code-server的--auth=none参数千万别在公网暴露，否则等于把开发环境白送给扫描器
真正卡住人的从来不是“怎么打开”，而是搞不清“谁负责哪一层”：VS Code 只管编辑和任务调度，Live Server 负责起 HTTP 服务并监听文件变化，Chrome 负责渲染和调试协议对接。三者少一环，就只剩手动刷新。
