双击HTML文件是最轻量可靠的预览方式，但仅适用于无fetch、XMLHttpRequest等file://协议受限功能的纯静态页面；否则需用Live Server等本地HTTP服务。
用浏览器直接打开 HTML 文件就能预览
不需要服务器、不用装软件，只要写好 index.html，双击它或拖进浏览器标签页，立刻看到效果。这是最轻量、最可靠的本地预览方式——前提是文件路径里没用到 fetch、XMLHttpRequest 或本地 file:// 协议受限的 API。
常见错误现象：Failed to load resource: net::ERR_FILE_NOT_FOUND（引用了同目录下不存在的 style.css 或 script.js）；或者控制台报 Access to script at 'file:///...' from origin 'null' has been blocked（Chrome 对 file:// 协议下跨文件脚本加载越来越严格）。
- 确保所有
<link href="style.css">、<script src="main.js">的路径是相对路径，且文件真实存在 - 避免在
file://下用fetch('./data.json')—— 浏览器会直接拒绝，换成内联数据或改用本地服务 - 如果只是临时调试，Edge 和 Firefox 对
file://的限制比 Chrome 宽松，可换浏览器试试
用 VS Code 插件起一个本地 HTTP 服务
当项目需要 AJAX、ES 模块导入、Service Worker 或其他必须运行在 http:// 下的功能时，就得启动一个最小 HTTP 服务。VS Code 的 Live Server 插件是最省事的选择——右键 HTML 文件 → “Open with Live Server”，自动打开浏览器并监听文件变化。
注意：它默认用 http://127.0.0.1:5500（不是 localhost），某些依赖 localhost 的开发工具（比如部分 OAuth 回调）可能不认这个地址；另外，它不支持自定义端口或 HTTPS，也不处理后端逻辑。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 安装插件后，首次运行会在右下角显示端口号，点击即可跳转
- 保存 HTML/CSS/JS 文件后，页面自动刷新（可关掉：右键状态栏 → “Disable Live Reload”）
- 如果端口被占，插件会自动顺延到下一个可用端口（如
:5501），但不会提示，需看状态栏确认
用命令行快速起一个零配置 HTTP 服务
没有编辑器、或想脱离 GUI 快速验证，终端一行命令就能搞定。Node.js 用户可用 npx serve，Python 用户可用内置模块，都无需全局安装。
性能与兼容性影响很小——这些工具只做静态文件分发，无额外中间件，启动快、内存占用低。但要注意 Python 2/3 命令不同，且 Windows 默认没装 Python；Node 方式要求机器上已装 Node.js。
- Node.js（推荐）：
npx serve -s .（-s表示单页应用模式，404 也返回index.html） - Python 3：
python -m http.server 8000 - Python 2：
python -m SimpleHTTPServer 8000 - 启动后访问
http://localhost:8000，Ctrl+C 停止服务
在线编辑器适合分享和协作，但有局限
CodePen、JSFiddle、StackBlitz 这类平台能实时渲染、存档、嵌入，适合写 demo、发问题、教别人。但它们本质是沙盒环境，HTML/CSS/JS 被包裹在 iframe 或重写上下文中，很多行为和本地不一致。
典型坑：<meta name="viewport"> 可能被忽略；window.location 返回的是沙盒 URL；无法读取本地 localStorage（各 Pen 隔离）；StackBlitz 的 Vite 模式对 import.meta.env 处理和本地有差异。
- 调试时别全信控制台输出——先确认你看到的是主窗口还是 iframe 里的 console
- 涉及文件读写、摄像头、地理位置等 API，必须用 HTTPS，而免费版 CodePen 是
https://codepen.io，但自定义域名不行 - 复杂项目（多入口、构建配置）别硬塞进在线编辑器，维护成本远高于本地搭个
serve
真正容易被忽略的是：不同方式对应的同源策略边界完全不同。本地双击是 file://，Live Server 是 http://127.0.0.1，Python http.server 是 http://localhost，而 CodePen 是 https://codepen.io —— 这些看似微小的协议+域名差异，会直接决定 fetch 能不能发、cookie 怎么带、iframe 能不能通信。
