Live Preview无法正常显示网页效果时，需依次检查并重新安装官方扩展、禁用冲突扩展、手动指定未被占用的预览端口、确保在文件夹工作区中打开HTML文件。
如果您在VSCode中编辑HTML、CSS或JavaScript文件，但Live Preview扩展无法正常显示网页效果，则可能是由于扩展未正确安装、端口被占用或工作区配置异常。以下是解决此问题的步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、检查并重新安装Live Preview扩展
Live Preview功能依赖于官方维护的扩展，若扩展损坏或版本不兼容，将导致预览窗口空白或无法启动。需确保安装的是Microsoft官方发布的最新稳定版。
1、点击左侧活动栏的扩展图标（或按快捷键Ctrl+Shift+X）。
2、在搜索框中输入Live Server，确认结果中显示发布者为Ritwick Dey；同时搜索Live Preview，确认发布者为Microsoft。
3、若已安装，先点击其右侧的卸载按钮；重启VSCode后，重新搜索并点击“安装”。
二、禁用冲突扩展
部分扩展（如Auto Rename Tag、Prettier、其他实时服务器类工具）可能劫持HTTP请求或覆盖默认端口，干扰Live Preview的本地服务绑定行为。
1、打开命令面板（Cmd+Shift+P），输入并选择Extensions: Show Enabled Extensions。
2、逐个查找并禁用以下类型扩展：Live Server、Browser Preview、Preview on Web Server。
3、关闭所有打开的预览窗口，右键HTML文件，再次选择Open with Live Preview。
三、手动指定预览端口
Live Preview默认尝试使用8000端口，若该端口被其他进程占用（如本地Node.js服务、Docker容器），则预览会失败且无明确报错提示。
1、打开VSCode设置（Cmd+,），在搜索框中输入live preview port。
2、找到选项Live Preview: Port，将其值修改为8080或3000等未被占用的端口号。
3、保存设置，关闭当前预览页，重新右键HTML文件并触发预览。
四、验证工作区权限与文件路径
Live Preview仅支持在已打开文件夹（即工作区）内运行，且要求HTML文件位于根目录或子目录中，不能以单独文件形式打开（即未处于任何文件夹工作区）。
1、点击菜单栏File → Open Folder，选择包含HTML文件的整个项目文件夹。
2、确认资源管理器中显示的是文件夹名称而非单个文件名。
3、右键目标HTML文件，在上下文菜单中确认Open with Live Preview选项为可点击状态。
