在线运行代码
想验证一段 JavaScript 到底输出什么，不用开编辑器也不用打开控制台。代码在浏览器的 Web Worker 沙箱里跑，console 输出、返回值、异常和耗时都会列出来；写死循环也不怕，超时会被强制终止。另一个页签可以把 HTML、CSS、JS 拼起来实时预览，改完直接导出成一个 HTML 文件。
控制台
说明
- 代码跑在哪里
- JavaScript 那一栏跑在你自己浏览器的 Web Worker 里，不经过服务器，所以代码和数据都不会外传，也没有排队和额度限制。Worker 是独立线程，写死循环不会把页面卡住，超时后直接
terminate()强制终止，这一点是eval和setTimeout做不到的。 - 哪些东西在 Worker 里用不了
- Worker 没有 DOM，所以
document、window、alert都不存在，写了会直接报ReferenceError；需要操作 DOM 请换到「HTML / CSS / JS 预览」那个页签。可以用的有fetch、XMLHttpRequest、setTimeout、crypto、TextEncoder、IndexedDB等；fetch受同源策略限制，跨域请求需要对方站点允许 CORS。 - 顶层 await 和 return
- 你的代码会被包进一个
async函数体里执行，所以可以直接写await，也可以用return把结果交出来——返回值会单独显示在输出的最后一行。如果最后一个表达式没有return，不会自动当成返回值，这一点和浏览器控制台不一样，需要显式写。 - 输出是怎么格式化的
console.log的每个参数都会被递归展开：对象和数组最多展开 5 层，再深就折叠成[Object]；循环引用显示成[Circular]；Map、Set、Date、RegExp、Error、函数、Symbol、BigInt都有各自的写法。数组和对象超过 200 个元素时只显示前 200 个，避免一条日志刷爆页面。- 预览页签的沙箱
- 预览用的 iframe 加了
sandbox="allow-scripts"，没有开allow-same-origin，因此预览页拿不到本站的 Cookie 和 localStorage，也访问不了父页面的 DOM。预览页里的console输出和未捕获异常会通过 postMessage 转发到下面那块黑色区域。要注意alert、confirm、prompt在沙箱里被禁用了，调试请改用console.log。 - 导出的 HTML 能直接用吗
- 可以。导出的是一个自包含的单文件：CSS 放在
<style>里，JS 放在<body>末尾的<script>里，双击就能在浏览器打开，也可以直接丢到服务器上。转发控制台用的那段注入脚本不会写进导出文件。 - 相关工具
- JS 格式化与压缩、JSON 格式化、正则表达式测试、HTML 格式化、CSS 格式化。
