Live Server通过本地HTTP服务器提供完整Web环境，支持跨域、实时刷新、浏览器调试及多文件协同；Live Preview基于VSCode WebView内嵌渲染，无服务器、不支持外部资源加载、无调试工具、仅单文件预览。
如果您在VSCode中需要预览HTML文件，但对Live Server和Live Preview两个插件的功能边界感到困惑，则可能是由于二者在运行机制、预览方式与集成深度上存在本质差异。以下是区分这两个插件的关键要点：
本文运行环境：MacBook Air M2，macOS Sequoia
一、运行原理与服务模式
Live Server通过启动一个本地HTTP服务器（默认端口5500）来提供文件服务，所有资源按Web标准解析，支持跨域请求、AJAX、相对路径引用及完整的JavaScript/CSS执行环境；而Live Preview是微软官方开发的轻量级内嵌预览器，不启动独立服务器，而是将HTML内容直接注入VSCode内置WebView渲染，依赖编辑器沙箱环境，无法处理需服务端响应的逻辑。
1、Live Server会生成类似http://127.0.0.1:5500/index.html的真实URL地址，浏览器地址栏可见且可分享。
2、Live Preview仅显示为VSCode编辑器内的一个只读面板，URL显示为vscode-webview://...，不可复制、不可外部访问。
3、当HTML中包含<script src="api/data.json"></script>等需HTTP上下文的资源引用时，Live Server能正常加载，Live Preview将报404错误。
二、实时刷新机制
Live Server采用文件系统监听+WebSocket广播策略，在保存文件瞬间向已打开的浏览器页推送刷新指令，响应延迟低于100ms；Live Preview则基于VSCode文档变更事件触发重渲染，不依赖网络通信，但仅对当前活动HTML标签生效，不自动同步CSS/JS关联文件改动。
1、修改CSS文件后，Live Server控制的浏览器页面会立即重绘样式。
2、相同操作下，Live Preview仅在焦点回到HTML文件并手动触发保存后才更新样式，不会监听外部引入的CSS或JS文件变更。
3、若HTML中使用<link rel="stylesheet" href="./style.css">，Live Server可感知style.css变化并刷新，Live Preview则忽略该文件变动。
三、调试能力支持
Live Server预览完全复用系统默认浏览器，因此可自由打开DevTools、启用网络面板、设置断点、模拟设备尺寸及地理定位；Live Preview因运行于受限WebView中，仅暴露基础渲染结果，不开放开发者工具入口，也无法启用Network、Console或Application面板。
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
1、在Live Server预览页中按Cmd+Option+I（macOS）可调出完整Chrome DevTools。
2、Live Preview面板右键无“检查元素”选项，无法查看DOM结构、无法调试JavaScript运行时错误。
3、当页面含console.log("test")时，Live Server可在浏览器控制台看到输出，Live Preview则完全静默。
四、路径与编码兼容性
Live Server要求文件路径不含中文或空格，否则可能触发URI解析失败导致空白页；Live Preview对路径字符限制更宽松，支持UTF-8编码的中文文件名与嵌套目录，但对含中文的<img src="%E5%9B%BE%E7%89%87.png" alt="VSCode的Live Server和Live Preview有什么区别？" >仍可能因WebView安全策略拦截资源加载。
1、将项目存于/Users/name/我的项目/index.html时，Live Server启动失败并提示“Invalid URI”。
2、相同路径下，Live Preview可成功渲染HTML骨架，但<img alt="VSCode的Live Server和Live Preview有什么区别？" >标签显示为断裂图标。
3、若文件路径含中文，应优先选用Live Preview；若需完整资源加载能力，必须将项目移至英文路径再使用Live Server。
五、多文件协同预览
Live Server支持同一服务器下多个HTML文件共享静态资源（如共用/css/或/js/目录），通过相对路径互相跳转；Live Preview每次仅绑定单个打开的HTML文件，切换标签页即中断前一预览，且不识别跨文件路径引用关系。
1、在page1.html中写<a href="page2.html">跳转</a>，Live Server点击后新页正常加载。
2、相同链接在Live Preview中点击无响应，所有超链接在Live Preview中均被禁用。
3、若项目含index.html与about.html且均引用./lib/utils.js，Live Server可同时服务二者，Live Preview只能逐个单独预览且无法共享JS执行上下文。
