VS Code 中的实时浏览器预览：快速指南

在开发过程中，没有什么比不断在编辑器和浏览器之间切换来查看更改更影响开发流程的了。如果你厌倦了每次调整 CSS 或更新 HTML 时都要进行 alt-tab 切换操作，VS Code 的实时预览扩展可以彻底改变你的工作流程。本指南涵盖了两个最佳选择——微软的 Live Preview 和经典的 Live Server——并帮助你为项目选择合适的工具。

为 VS Code 选择合适的实时预览扩展

两个扩展都解决了相同的核心问题，但在不同场景下各有优势。了解它们的优势有助于你选择符合工作流程的工具。

Microsoft Live Preview：现代化选择

当你需要的不仅仅是基本的文件服务时，Live Preview 表现出色。其嵌入式浏览器将所有功能保持在 VS Code 内部，非常适合教程、研讨会或屏幕空间有限的情况。该扩展提供两种刷新模式：输入时即时更新或传统的保存后刷新行为。

在以下情况下使用 Live Preview：

• 需要在代码旁边进行嵌入式预览
• 需要服务器请求日志记录用于调试
• 需要与 VS Code 内置 JavaScript 调试器集成
• 需要 Edge DevTools 进行元素检查

该扩展最适用于静态网站和简单的单页应用程序。对于具有自己开发服务器的复杂框架（React、Vue、Angular），请坚持使用框架的工具。

Live Server：轻量级替代方案

Live Server 仍然是希望简单性的开发者的首选。一键点击即可在外部浏览器中启动项目，并在保存时自动刷新。其杀手级功能？网络访问——使用计算机的本地 IP 地址在真实的手机和平板电脑上测试响应式设计。

在以下情况下选择 Live Server：

• 快速静态网站开发
• 跨设备响应式测试
• 最小配置要求
• 传统的外部浏览器工作流程

快速设置：从安装到实时预览

安装你选择的扩展

打开 VS Code 的扩展面板（Ctrl+Shift+X 或 Mac 上的 Cmd+Shift+X）。搜索”Live Preview”（由 Microsoft 发布）或”Live Server”（由 Ritwick Dey 发布）。验证发布者名称——搜索结果中仍会显示几个已弃用的扩展。点击安装即可。

启动你的第一个实时预览

关键第一步：将项目文件夹作为工作区打开（文件 > 打开文件夹）。单文件预览可以工作，但会导致链接资源的路径问题。

对于 Live Preview：右键点击任何 HTML 文件，选择”Show Preview”进行嵌入式查看，或选择”Show Preview in External Browser”进行传统工作流程。

对于 Live Server：右键点击 HTML 文件，选择”Open with Live Server”或点击状态栏中的”Go Live”。

两个扩展都会监视你的文件并自动刷新。保存更改并观看预览更新——无需手动刷新。

常见问题和快速修复

工作区与单文件的陷阱

看到”file is not a child of the server root”警告？你遇到了最常见的问题。两个扩展都从工作区根目录提供文件服务。在没有工作区的情况下打开单个文件会破坏相对路径。始终打开项目文件夹，而不仅仅是 HTML 文件。

需要从子文件夹提供服务？在设置中调整服务器根目录：

{
  "livePreview.serverRoot": "/src"
}

对于 Live Server，使用：

{
  "liveServer.settings.root": "/src"
}

通用的”重新加载窗口”修复

上下文菜单选项缺失？扩展无响应？在进一步故障排除之前，尝试 VS Code 的通用修复：Ctrl+Shift+P（或 Mac 上的 Cmd+Shift+P），然后选择”Developer: Reload Window”。这可以解决大多数扩展故障，而不会丢失你的工作。

高级用户技巧

端口配置和多根工作区

默认端口已被占用？在设置中配置自定义端口：

{
  "liveServer.settings.port": 5501,
  "livePreview.portNumber": 3001
}

使用多根工作区？每个根目录都有自己的服务器实例。将鼠标悬停在状态栏指示器上可查看所有活动端口。

特殊环境：Codespaces 和远程开发

使用 GitHub Codespaces？嵌入式预览需要手动端口转发。打开端口面板，点击转发的 URL 以触发身份验证，然后重新启动预览。外部浏览器预览通常无需额外步骤即可工作。

注意到嵌入式和外部预览之间的样式差异？清除外部浏览器的缓存——嵌入式预览始终重新开始，而外部浏览器可能提供缓存的资源。

结论

当你需要调试工具、嵌入式预览或服务器日志记录时，选择 Live Preview。对于直接的静态托管和设备测试，选择 Live Server。两个扩展都会定期更新，并与现代 VS Code 可靠配合。

首先根据项目类型匹配扩展。静态 HTML/CSS/JS？两者都可以。需要调试？Live Preview。跨设备测试？Live Server。最佳的 VS Code 实时预览设置是那种不会妨碍你并让你专注于构建的设置。

常见问题

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.