Live Server插件配合VS Code可稳定实现双屏实时预览，支持HTML/CSS/JS修改即刷新；关键需以文件夹打开项目、确保路径匹配、使用HTTP服务而非file://协议，避免路径错乱与跨域限制。
VS Code 里用 Live Server 开双屏，为什么比 preview-plus 好使？
Live Server 启动的是真实 HTTP 服务（http://127.0.0.1:5500），浏览器加载时走标准网络协议，能正确解析 <link rel="stylesheet">、<script src> 和图片路径；而 Atom 的 preview-plus 是 WebView 渲染本地 file:// 文件，天生受跨域和相对路径限制。
实操建议：
- 右键 HTML 文件 → Open with Live Server，自动在默认浏览器打开页面
- 在 VS Code 中按
Ctrl+\（Windows/Linux）或Cmd+\（macOS）分屏，左侧写代码，右侧切到浏览器窗口 —— 这就是最稳的“双屏” - 改完代码保存（
Ctrl+S），浏览器自动刷新，无需手动按 F5 - 如需嵌入式预览（非浏览器），可改配置项
livePreview.openPreviewTarget为Embedded Preview，但注意：它不支持 JS 调试、不加载外部字体、对@importCSS 支持弱
HTML/CSS/JS 分开写，怎么让双屏预览真正联动？
常见错误是：左屏改了 style.css，右屏 HTML 预览没变 —— 这不是 Live Server 的问题，而是 HTML 里引用路径或服务器根目录没配对。
关键检查点：
立即学习“前端免费学习笔记（深入）”；
-
<link rel="stylesheet" href="style.css">中的style.css必须和 HTML 文件在同一目录，或按livePreview.serverRoot设置的根目录计算相对路径 - 不要用
../css/style.css这类向上跳级路径，Live Server 默认不代理上级目录（会 404） - JS 文件同理：
<script src="main.js"></script>要确保main.js可被http://127.00.1:5500/main.js直接访问 - 如果项目结构深（如
/src/index.html），在settings.json里显式设"livePreview.serverRoot": "./src"
自己写简易预览页，iframe.srcdoc 到底能不能用？
能，但只适合单文件快速验证，不适合真实开发。它的核心限制是：JS 执行环境隔离、无法加载外部资源、不触发 window.onload、console.log 不显示在开发者工具里。
示例代码片段（仅作理解）：
<iframe id="preview-frame"></iframe>
<textarea id="html-editor"><h1>Hello</h1></textarea>
<script>
const frame = document.getElementById('preview-frame');
const editor = document.getElementById('html-editor');
editor.addEventListener('input', () => {
frame.srcdoc = editor.value; // 每次输入都重写整个 HTML
});
</script>
问题明显：
- CSS 和 JS 必须内联写进 HTML 字符串里，没法分离文件
- 一旦 HTML 里有
<img src="logo.png">，srcdoc无法加载该图片（路径失效） - 移动端 viewport、字体加载、第三方 script 全部失效
5500，不是 3000 或 8080 —— 很多人卡在这一步，因为浏览器缓存了旧端口的 404 页面，清缓存或换端口再试才见效。 
