Live Server是VS Code中实现HTML/CSS/JS实时预览的首选扩展，因其提供本地HTTP服务、自动刷新、开箱即用等特性，而VS Code内置功能仅支持一次性打开且不监听文件变化。
VS Code 本身不内置
浏览器
预览功能，所谓“实时预览”必须依赖扩展或外部工具协同；直接按
搜索
并安装，是最快落地的方案。
为什么 Live Server 是首选而非内置 Preview 功能
VS Code 自带的
只做一次性打开，不监听文件变化；而
启动的是一个本地 HTTP 服务（默认
），自动注入 WebSocket 监听器，HTML/CSS/JS 修改保存后秒级刷新——这正是
前端
开发需要的“实时”。
它不依赖 Node.
js
全局环境，开箱即用
支持自定义端口、根路径、是否自动打开浏览器等配置，通过右键菜单或命令面板触发
对多页面项目友好：在任意 HTML 文件上右键选
，它会以该文件为入口启动服务
注意：它不会代理 API 请求，纯静态资源场景才开箱可用；若调用
，需额外配代理或改用
遇到 “Cannot GET /” 错误怎么办
这是
找不到入口 HTML 文件的典型提示。它默认尝试访问项目根目录下的
，但如果你当前工作区是子文件夹，或主文件叫
，就会 404。
确保你是在包含 HTML 文件的文件夹里打开了 VS Code 工作区（不是只打开单个文件）
右键点击目标 HTML 文件 →
，而不是点空白处或文件夹
检查设置：
可设为相对路径如
，让服务从
下启动
如果用了 Vue/React 脚手架，别用
——它们自带更完善的 dev server（如
）
想热重载 CSS/JS 而不刷新整个页面？
默认整页刷新，适合快速原型；真要局部更新，得换工具链。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
纯 CSS 修改可启用浏览器开发者工具的
（Firefox）或
面板（Chrome），手动粘贴调试
JS 热更新需模块化环境：用
创建项目（
），运行
，它基于原生 ES modules 实现 HMR
VS Code 插件
、
、
这些虽不预览，但能减少保存后出错再刷新的次数
真正卡住人的往往不是“怎么开预览”，而是没分清“静态资源预览”和“框架开发环境”的边界——前者用
，后者必须走对应框架的 dev server。混淆这两者，90% 的“刷新不生效”“路径 404”“API 报错”问题就都来了。
Ctrl+Shift+PLive ServerOpen in Default BrowserLive Serverhttp://127.0.0.1:5500Open with Live Server/api/xxxwebpack-dev-serverLive Serverindex.htmlhome.htmlOpen with Live ServerliveServer.settings.root"src"./srcLive Servernpm run serveLive ServerStyle EditorChangesVitenpm create vite@latestnpm run devAuto Rename TagPrettierESLint
// 示例：用 Vite 启动一个最小 HTML 项目（无需构建配置）
npm create vite@latest my-app -- --template vanilla
cd my-app
npm install
npm run dev
// 访问 http://127.0.0.1:5173，改 index.css 会局部更新，改 main.js 也会 HMR
Live Server