邮件签名排版崩
给客户发完报价邮件，对方说签名档里的 Logo 和电话分行错乱。用 Word 写的签名在 Outlook 里渲染全走样。把签名 HTML 片段贴进本工具，三栏实时看效果，边改边调 table 布局和行高，确保在 Gmail 和手机端都对齐。不用反复发测试邮件，3 分钟定稿。
H T M L
▾
1
C S S
▾
1
J S
▾
1
预 览 sandbox · 本地
控 制 台 0
▾
控制台输出 / 运行时错误将在这里呈现 —— 试试在 JS 里 console.log('你好')
隐私：HTML / CSS / JS 的合成、渲染、导出全程在浏览器本地完成，源码绝不上传服务器。预览运行于
sandbox 沙盒 iframe（允许脚本执行你写的 JS，但不授予 same-origin，脚本无法访问本站页面与同源资源）。控制台输出经
postMessage 转发到本面板。
就绪 · 编辑三栏代码即时预览
第一节
关于本工具
About前端调试时，改一行 CSS 就要切编辑器、保存、刷新浏览器，等十几秒才看到效果。在这个页面里，HTML、CSS、JS 三栏分别编辑，右侧画布实时响应每一次按键——增删一个 div、调一个颜色、改一条逻辑，结果立刻可见。所有代码仅在浏览器本地运行，不上传任何字符到服务器。
使用场景
活动页倒计时失效
双十一活动页的倒计时 JS 在 Chrome 上正常，但用户反馈 Safari 里数字不动。把整段 HTML/CSS/JS 复制到本工具，三栏同步预览，发现是 Date.parse 在 Safari 不认 '2023-11-11 00:00:00' 这种格式。直接在 JS 栏改成 ISO 8601 格式，右侧预览立即更新，验证通过后替换线上代码。
CMS 富文本样式丢失
在后台编辑器里排好的产品图文介绍，发布到前台后标题字号变大、图片边距消失。把后台生成的 HTML 源码粘进本工具，对照左侧代码和右侧渲染，发现编辑器给标题加了内联 font-size，但被全局 CSS 的 !important 覆盖。在 CSS 栏加一条更高优先级的选择器，实时看到修复效果，再反向改回 CMS。
学习 CSS Grid 布局
刚接触 Grid 布局，文档里说 grid-template-columns 设 repeat(3, 1fr) 能三等分，但自己写出来总是多一列或少一列。在 HTML 栏写几个 div，CSS 栏写 Grid 属性，改一个值右侧立即重排。试了 minmax、auto-fill 和 gap 组合，看到不同屏幕宽度下的折行行为，比看教程截图直观得多。
第三方组件样式覆盖
项目里用了日期选择器插件，默认弹窗是白色背景，但页面是深色主题。翻文档找 API 改不了。把插件生成的 HTML 片段和页面全局 CSS 粘进本工具，在 CSS 栏用更高特异性选择器覆盖 .datepicker-popup 的背景色和文字色，右侧实时看到弹窗变深色且文字可读。确认方案后写到项目样式文件。
第二节
使用指南
Getting Started使用步骤
- 1在左侧 HTML 编辑区粘贴或编写网页结构代码，右侧预览区同步渲染页面骨架
- 2在中间 CSS 编辑区添加样式规则（如 .box { color: red }），预览区即时应用样式变化
- 3在右侧 JS 编辑区写入脚本逻辑（如 alert('hello')），预览区自动执行并显示交互效果
- 4点击预览区右上角「全屏」按钮，在新标签页中查看独立页面效果，便于调试响应式布局
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| <h1>Hello World</h1> <p style="color: red;">This is red text.</p> | 渲染为红色标题和红色段落文本。 | 常规：纯 HTML + 内联 CSS，验证基本渲染和样式生效。 |
| <div id="app"></div> <script> document.getElementById('app').innerHTML = '<p>JS 动态内容</p>'; </script> | 页面显示“JS 动态内容”段落。 | 常规：验证 JavaScript 执行，DOM 操作正常。 |
| <style> body { margin: 0; background: #000; color: #fff; } </style> <p>Dark mode</p> | 黑色背景白色文字，页面无外边距。 | 边界：CSS 重置 body 样式，验证样式覆盖和背景色渲染。 |
| <script> while(true) {} </script> | 页面卡死或浏览器提示脚本无响应（取决于浏览器沙箱机制）。 | 边界：死循环，暴露工具对无限循环的防护（无超时中断时可能卡住）。 |
| <script> var x = 1; var x = 2; console.log(x); </script> | 控制台输出 2（非严格模式下 var 重复声明不报错）。 | 易错：var 重复声明不报错，但新手常误以为会报错，验证作用域行为。 |
| <img src="https://example.com/nonexistent.png" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22><rect fill=%22red%22 width=%22100%22 height=%22100%22/></svg>'"> | 显示一个红色方块（图片加载失败后触发 onerror 回退）。 | 边界：图片 404 处理，验证 onerror 事件和 data URI 回退是否生效。 |
| <script> console.log('Hello'); // 注释 /* 多行注释 */ </script> | 控制台输出 'Hello'，注释被忽略。 | 常规：验证注释不影响执行，适合测试代码片段。 |
常见错误对照
1.CSS 未闭合花括号导致后续样式全部失效
✗ 错误
.box { color: red; background: blue;✓ 修复
.box { color: red; background: blue; }CSS 解析器遇到未闭合的花括号会吞掉后续所有规则，直到文件末尾。检查编辑器右侧的括号匹配高亮可快速定位。
2.HTML 中混入 PHP/ASP 标签，浏览器直接输出源码
✗ 错误
<p>当前时间：<?php echo date('Y-m-d'); ?></p>✓ 修复
<p>当前时间：<span id="time"></span></p>
<script>document.getElementById('time').textContent = new Date().toISOString().slice(0,10);</script>本工具是纯前端渲染，不执行服务端脚本。PHP/ASP/JSP 标签会被视为未知 HTML 元素，直接显示在页面上。
3.JavaScript 变量名与 HTML id 冲突导致 undefined
✗ 错误
<input id="name">
<script>var name = '张三'; console.log(name);</script>✓ 修复
<input id="name">
<script>var userName = '张三'; console.log(userName);</script>全局作用域下 var 声明的变量会挂到 window 上，与同名的 DOM id 属性冲突。使用 let/const 或不同命名可避免。
4.CSS 选择器权重不够，样式被覆盖
✗ 错误
.box { color: red; }
<div class="box" style="color: blue;">文本</div>✓ 修复
.box { color: red !important; } 或移除内联 style内联样式优先级高于类选择器（权重 1,0,0,0 > 0,1,0,0）。调试时打开浏览器开发者工具查看实际生效的样式规则。
5.JavaScript 中字符串拼接 HTML 忘记转义引号
✗ 错误
document.body.innerHTML = '<button onclick="alert("hi")">点我</button>';✓ 修复
document.body.innerHTML = '<button onclick="alert(\'hi\')">点我</button>';外层用双引号时，内层双引号必须转义或用单引号交替。否则字符串提前结束导致语法错误。推荐使用模板字符串 ` 或 createElement。
6.HTML 标签未闭合导致布局错乱
✗ 错误
<ul><li>苹果<li>香蕉<li>橘子</ul>✓ 修复
<ul><li>苹果</li><li>香蕉</li><li>橘子</li></ul>浏览器会尝试自动闭合未闭合的 li，但在复杂嵌套中可能产生意外的 DOM 结构。始终显式闭合所有非 void 元素。
7.CSS 中使用了浏览器私有前缀但未加标准属性
✗ 错误
.box { -webkit-border-radius: 10px; }✓ 修复
.box { -webkit-border-radius: 10px; border-radius: 10px; }私有前缀仅针对特定浏览器内核，标准属性确保跨浏览器兼容。现代浏览器已支持无前缀版本，但旧版 Safari/Chrome 仍需 -webkit-。
8.JavaScript 中异步操作未处理，页面无响应
✗ 错误
fetch('/api/data').then(function(r) { return r.json(); }); // 没 .then 处理数据✓ 修复
fetch('/api/data').then(function(r) { return r.json(); }).then(function(data) { console.log(data); });fetch 返回 Promise，不链式调用 .then 则数据被丢弃。本工具中若请求失败，需加 .catch 捕获错误，否则静默失败。
第三节
工作原理
How It Works核心公式
渲染结果 = 解析(HTML + CSS + JS) → DOM + CSSOM → 渲染树 → 布局 → 绘制
变量说明
HTML超文本标记语言，定义结构CSS层叠样式表，控制样式与布局JSJavaScript，实现动态交互逻辑DOM文档对象模型，HTML 解析后的树结构CSSOMCSS 对象模型，样式解析后的树结构渲染树DOM 与 CSSOM 合并后的可见节点树
示例
输入 HTML：<div id='box'>Hello</div>，CSS：#box { color: red; font-size: 20px; }，JS：document.getElementById('box').innerText += ' World';。浏览器解析 HTML 生成 DOM 树（div 节点），解析 CSS 生成 CSSOM（color: red 规则），合并为渲染树，布局计算 div 位置与尺寸，绘制出红色 20px 文字 'Hello World'。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我写了个带图片的网页，这个工具能预览吗？图片链接怎么放？＋
答
可以预览，图片链接需要用完整的 http(s):// 或相对路径。如果图片在本地电脑上，需要先上传到某个图床，拿到外链再贴到 HTML 代码里。本工具是纯浏览器运行，不提供文件上传功能，所以本地图片路径（比如 C:\pic.jpg 或 ./images/a.png）是看不到的。推荐用 sm.ms、路过图床等免费图床获取在线链接。
问为什么我粘贴了代码，右边预览区一片空白？＋
答
最常见的原因是 HTML 结构不完整，缺少 <!DOCTYPE html> 或 <html> 标签。本工具会尝试补全，但如果代码里有语法错误（比如标签没闭合、属性值漏了引号），浏览器无法渲染。另一个可能是 CSS 或 JS 有错，导致页面崩溃。建议先贴一段最简单的结构（<h1>Hello</h1>）测试是否正常，再逐步加内容，方便定位是哪段代码出了问题。
问这个工具能跑 JavaScript 吗？比如 alert 或者 console.log？＋
答
可以跑 JavaScript，包括 alert、console.log 等。alert 会弹出浏览器对话框，console.log 的输出需要在浏览器开发者工具（F12 的 Console 面板）里查看，本工具界面不显示控制台输出。注意：跨域请求（比如用 fetch 请求其他网站）可能会被浏览器拦截，这是浏览器安全策略，不是本工具的限制。建议用本工具调试纯前端交互逻辑，比如点击按钮改变样式。
问我写了一个响应式布局，怎么测试不同屏幕尺寸下的效果？＋
答
本工具的预览区域是固定宽高的，不能直接模拟手机或平板尺寸。要测试响应式，建议在预览区域右键→检查，然后点击开发者工具左上角的「切换设备工具栏」图标（手机+平板图标），选择 iPhone、iPad 等预设尺寸。或者，也可以直接调整浏览器窗口大小来预览。本工具的优势是快速验证代码逻辑，精确的响应式调试建议用浏览器的设备模拟模式。
问代码写了一半不小心刷新了，内容还能找回吗？＋
答
不能自动找回。本工具是纯前端运行，所有代码都只存在于当前浏览器标签页的内存里，刷新页面会清空所有已输入的内容。建议养成习惯：写完一段关键代码后，手动复制到本地记事本或 IDE 保存。如果只是临时测试，可以用浏览器的「后退」功能（如果刷新前页面还在历史记录里），但成功率不高。长期使用建议搭配 Git 或在线代码仓库管理代码。
问这个工具和 CodePen、JSFiddle 比，有什么不一样？＋
答
CodePen 和 JSFiddle 是功能完整的在线 IDE，支持保存、分享、协作、引入外部库（如 jQuery、React）等。本工具定位是「快速预览」，没有账号系统、不能保存项目、不能分享链接，也不支持自动从 CDN 加载库。但本工具的优势是：打开即用，无需注册，零加载等待，适合临时验证一段代码逻辑、调试一个样式 bug，或者给同事快速演示效果。如果需要长期项目管理，建议用 CodePen。
问我用了 ES6 语法（比如箭头函数、模板字符串），这个工具支持吗？＋
答
支持，前提是浏览器版本够新。本工具调用的是当前浏览器自带的 JavaScript 引擎，所以支持度完全取决于浏览器版本。Chrome 90+、Edge 90+、Firefox 90+ 基本都支持 ES6（ES2015）及大部分 ES2016-2020 特性。如果代码在工具里报语法错误，建议先检查浏览器版本，或者用 Babel 等转译工具将 ES6 转成 ES5 再测试。本工具不内置转译功能。
问预览效果和实际在服务器上打开不一样，怎么回事？＋
答
常见原因有：1）路径问题：本工具里用的相对路径（如 ./style.css）在服务器上可能指向不同位置；2）字体/图标：本工具没有加载 Google Fonts、Font Awesome 等外部资源，如果代码依赖这些，需要手动引入 CDN 链接；3）服务器端语言：本工具只能运行纯前端代码，PHP、Python 等后端语言生成的页面无法预览。建议先在本地搭建环境测试，或用本工具验证纯前端部分。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。