这个工具是什么
HTML 在线预览工具是一个三合一编辑器：HTML 写结构、CSS 写样式、JavaScript 写行为，右边实时渲染出页面效果，脚本里的 console 输出会同步显示在下方。相当于把「新建文件、写代码、刷新浏览器」这套动作压缩成边写边看。
什么时候用它
- 验证一段 HTML 结构或者 CSS 布局，比如 flex 与 grid 的具体表现、
position: sticky的生效条件。 - 试一个新的 CSS 属性（
aspect-ratio、clamp()、容器查询）在小例子里的效果。 - 写一段没有任何依赖的原生 JS 交互，确认事件绑定与 DOM 操作的逻辑。
- 给 FAQ、邮件模板、静态页做小范围修改后先看渲染结果。
- 复现一个只在浏览器里出现的问题，把最小例子写出来再让同事看。
有什么限制
- 预览在沙箱 iframe 中运行，脚本拿不到本站页面的 DOM、Cookie 与 localStorage。
- 因为没有同源身份，预览里发起的网络请求会被 CORS 拦截，想验证接口请用「cURL 转代码」在本地跑。
- 不能引用需要构建的依赖（npm 包、预处理器），只支持浏览器能直接执行的 HTML / CSS / JS。
- 引用外部图片或字体时，对方站点是否允许跨域引用由它自己决定。
- 自动刷新有 400 毫秒防抖，敲代码过程中不会每按一个键就重载。
常见问题
Q：预览会不会影响我正在浏览的这个页面？ A：不会。预览跑在独立的不透明源 iframe 里，与本站页面互相隔离，修改的样式不会外溢。
Q：为什么在预览里 document.cookie 报错？
A：沙箱 iframe 没有同源身份，访问 Cookie 与 localStorage 会被浏览器拒绝。这是隔离带来的必然结果。
Q：能加载外部的 CSS 框架吗？
A：如果对方提供的是浏览器可直接引用的 CDN 地址，可以在 HTML 栏里用 <link> 引入；需要编译步骤的框架不行。
Q：怎么把结果保存下来？ A：点「复制完整 HTML」，得到的是一个包含全部代码的单文件页面，保存成 .html 用浏览器打开即可。