如何在VS Code中编辑网页时实时分屏预览网页？

一、分屏实时预览的实现方法 #

1. Live Server + 拆分窗口跨屏预览 #

• 安装VS Code的Live Server扩展，右键HTML文件选择Open with Live Server，浏览器会自动打开预览页，该扩展会实时监听文件改动，代码保存后自动刷新页面
• 在VS Code中按Ctrl+\（Windows/Linux）或Cmd+\（Mac）拆分编辑窗口，一边写代码一边查看浏览器预览即可

2. Live Preview 内置分屏预览 #

• 安装Live Preview扩展，打开HTML文件后点击右上角的Preview按钮，VS Code会自动拆分出预览窗口与编辑窗口并排显示，修改代码后预览会实时同步，无需切换到外部浏览器

3. Edge DevTools 双向同步预览 #

• 打开Edge浏览器按F12调出DevTools，点击更多工具->远程设备，在VS Code的Microsoft Edge Tools扩展中连接当前Edge实例，即可在VS Code内分屏显示DevTools预览，代码改动会同步到预览，DevTools中调整的样式也能同步回代码

二、解决Microsoft Edge扩展预览模糊的问题 #

• 调整扩展缩放级别：打开VS Code设置（快捷键Ctrl+,/Cmd+,），搜索Edge Tools: Zoom Level，将数值设为100%，避免缩放导致的模糊
• 关闭硬件加速：在VS Code设置中搜索Window: Enable Hardware Acceleration，取消勾选后重启VS Code，硬件加速可能引发渲染异常
• 检查网页viewport设置：确保HTML头部添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，该标签能让浏览器正确适配屏幕像素密度，避免缩放模糊
• 更新扩展与VS Code：将Microsoft Edge Tools扩展和VS Code更新至最新版本，旧版本可能存在渲染bug
• 重置浏览器缩放：打开Edge浏览器按Ctrl+0（Windows/Linux）或Cmd+0（Mac），将浏览器缩放重置为100%后，重新连接VS Code的扩展预览

内容的提问来源于stack exchange，提问作者Mujeeb rahman