双击html文件可直接预览，但受限于file://协议导致fetch、es模块等失败；推荐用python起http服务（
python3 -m http.server 8000）或vs code live server插件，更接近生产环境。
直接双击打开 HTML 文件，浏览器就能看效果
绝大多数情况下，写完 index.html，不用启动服务器、不用装插件，直接在文件管理器里双击它，系统默认浏览器就会加载并渲染——这是最简单也最可靠的预览方式。但要注意路径和协议限制：本地双击时浏览器用的是 file:// 协议，这时候 fetch()、XMLHttpRequest、某些 import 语句会失败，控制台报 CORS policy 或 access to script at 'file://' is denied 这类错误。
常见踩坑点：
- 图片路径写成
/img/logo.png（带开头斜杠），实际应为img/logo.png（相对路径） - 用了
localStorage或indexedDB通常没问题，但部分浏览器对file://下的存储有更严策略 - ES 模块导入（
import）在file://下基本不工作，必须走http://
用 Python 快速起一个本地 HTTP 服务
只要机器装了 Python 3.6+，终端进到项目目录，一行命令就能获得真实 Web 环境：
python3 -m http.server 8000然后访问 http://localhost:8000 就行。这个服务支持所有前端功能：ajax、模块导入、Service Worker 注册（除 https 外）、相对/绝对路径都按标准解析。比双击更接近生产环境，又比配 Node.js 轻量得多。
立即学习“前端免费学习笔记（深入）”；
注意几个细节：
- 端口被占时换一个，比如
8001，命令末尾加数字即可 - Python 2 用户请用
python -m SimpleHTTPServer 8000（但已不推荐） - windows 用户若提示“不是内部或外部命令”，说明没加 Python 到 PATH，改用完整路径或换 PowerShell
VS Code 插件 Live Server 为什么有时不生效
Live Server 插件本质也是起本地 HTTP 服务，但它默认只响应 .html 文件右键菜单里的 “Open with Live Server”，而不是自动监听整个文件夹。容易忽略的关键点：
- 没保存文件就点预览？它不会热更新，必须先
Ctrl+S - 项目根目录下没有
index.html？它可能默认打开空白页或报 404 - 用了自定义端口或代理配置，但没在插件设置里填对，导致浏览器打不开或连错地址
- 同时开着多个 Live Server 实例，端口冲突后新启动的会静默失败
遇到打不开，先看 VS Code 右下角状态栏有没有显示 Go Live 和端口号；再检查浏览器地址是不是 http://127.0.0.1:5500/xxx.html 这种形式——如果是 file:// 开头，说明根本没走 Live Server。
移动端真机调试怎么看效果
电脑上预览只是第一步，手机屏幕尺寸、触摸事件、safari/chrome for ios 的兼容性差异才是真难点。最稳的方案是：确保手机和电脑在同一局域网，然后用 Python 起的服务 + 手机浏览器访问电脑 IP。
操作步骤：
- 在电脑终端运行
python3 -m http.server 8000 - 查电脑局域网 IP：
ifconfig | grep "inet "（macos/linux）或ipconfig（Windows），找类似192.168.x.x的地址 - 手机浏览器输入
http://192.168.x.x:8000（别输 localhost 或 127.0.0.1）
注意防火墙：macOS 默认允许，Windows 可能弹窗拦住 Python；iOS Safari 对 document.write、某些 CSS 属性更敏感，别依赖桌面端表现反推手机效果。
复杂点在于跨设备同步调试——你改一行 CSS，得切回手机刷新，没法像桌面那样开 DevTools 远程调试。真要深度调样式或 JS 行为，还是得用 Chrome 的 Remote Debugging 配 USB 连接，或者 Safari 的「开发」菜单连 macOS。但日常快速验布局，IP 访问足够了。