面试题验证现场
前端面试聊到闭包与异步队列的交互，候选人说了一段代码的执行顺序，面试官手头没有环境。打开本工具直接粘贴代码点运行，控制台立刻输出 1、undefined、3 的实际顺序，双方当场确认理解偏差在哪，不用靠猜或翻文档。
JavaScript 沙盒隔离
控制台 console
点「运行」执行代码 —— console.log / warn / error 输出将在这里呈现
就绪 · 沙盒隔离执行，可终止、防死循环
沙盒说明
safe by isolation · terminable worker
· 隔离执行：代码在独立 sandbox iframe（opaque 源、独立进程）中运行，与本页完全隔离，崩溃 / 死循环不冻结本页。
· 不可访问 DOM / 父页：沙盒无 allow-same-origin，document 操作仅作用于自身空文档，无法读 Cookie / 父页；需渲染 DOM 请用「HTML 在线渲染」工具。
· console 捕获：log / info / warn / error / debug / dir / table / assert / count / time / group 均被拦截并按级别分色。
· 异步支持：自动包裹 async IIFE，可直接 await；超时（默认 3 秒）将移除沙盒、强制终止并提示。
· 快捷键：⌘ / Ctrl + Enter 运行 · Tab 缩进。全程纯本地，无网络、无上传。
第一节
关于本工具
About写一个 `Array.prototype.flatMap` 的 polyfill，想快速验证行为是否符合预期——打开这个页面，把代码贴进编辑器，点运行，控制台直接输出结果。它就是一个纯浏览器的 JavaScript sandbox，代码不会离开本地，适合调试算法片段、测试 API 调用返回值、或者对比不同 ES 版本的语法差异。没有后端，没有上传，关掉页面数据就消失。
使用场景
API 返回调试
后端给了一个 JSON 接口，前端要写一段 reduce 做数据聚合。在 IDE 里开新项目太慢，本地 Node 又没装。把 mock 数据贴进代码区，写一段 map/reduce，本工具直接跑出聚合结果，确认逻辑无误后再复制到项目里，省去来回切换窗口的打断。
正则表达式试错
要在一段 200 行日志里提取所有 IP 地址，写的正则 /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/ 总感觉会漏掉边界情况。把样本日志贴进代码，用 String.match 跑一下，发现误匹配了 999.999.999.999，当场修正为带数字范围校验的版本，避免上线后漏数据。
教材代码片段演示
教学生理解原型链，书上给了三段代码说明 __proto__ 与 prototype 的关系。学生自己敲容易手误，在 IDE 里跑又得配环境。把三段代码依次贴进本工具，每段运行后控制台输出结果，学生逐行对比，当场看清属性查找路径的差异。
算法题边界测试
刷 LeetCode 第 15 题三数之和，本地写完核心逻辑但不确定空数组和 [0,0,0,0] 这种重复输入是否报错。把代码和测试用例贴进本工具，点运行看到输出 [[0,0,0]] 没死循环，确认去重逻辑正确，才提交到在线判题系统，节省反复提交的等待时间。
第二节
使用指南
Getting Started使用步骤
- 1在代码编辑区粘贴或键入 JavaScript 代码（如 console.log('Hello')），编辑器自动高亮语法
- 2点击「运行」按钮，右侧控制台区域立即输出执行结果与 console 内容
- 3若代码含错误（如未定义变量），控制台以红色字体显示错误类型与行号
- 4点击控制台右上角「清空」按钮，清除当前输出，可重新运行新代码
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| console.log('Hello, world!'); | Hello, world! undefined | 常规：基础输出语句，验证控制台是否正常打印字符串及返回值 undefined |
| let a = 1; let b = 2; console.log(a + b); | 3 undefined | 常规：多语句执行，验证变量声明与算术运算的连续执行 |
| console.log(0.1 + 0.2); | 0.30000000000000004 undefined | 边界：浮点数精度问题，暴露 IEEE 754 标准下的常见陷阱 |
| console.log(1 / 0); | Infinity undefined | 边界：除零行为，验证 JS 不抛错而返回 Infinity |
| console.log(typeof null); | object undefined | 易错：typeof null 返回 'object'，是 JS 历史遗留 bug，常被误解 |
| console.log([] + []); | "" undefined | 易错：空数组相加转为空字符串，暴露隐式类型转换规则 |
| console.log('5' - 3); | 2 undefined | 易错：字符串与数字的减法触发隐式转换，而加法会拼接，容易混淆 |
常见错误对照
1.用 `console.log` 输出对象，只看 `[object Object]`
✗ 错误
console.log({ a: 1, b: 2 })✓ 修复
console.log(JSON.stringify({ a: 1, b: 2 }, null, 2))console.log 在浏览器控制台可展开对象，但在纯文本沙盒输出中只会调用 toString()，得到 `[object Object]`。必须用 JSON.stringify 序列化。
2.异步代码未等待，输出 `Promise { <pending> }`
✗ 错误
const res = fetch('https://api.example.com'); console.log(res);✓ 修复
fetch('https://api.example.com').then(res => res.text()).then(console.log);fetch 返回 Promise，直接 console.log 只会打印 Promise 状态。必须用 .then() 或 await（需在 async 函数内）获取实际结果。
3.误用 `var` 导致循环变量泄露或意外覆盖
✗ 错误
for (var i = 0; i < 5; i++) { setTimeout(() => console.log(i), 100); }✓ 修复
for (let i = 0; i < 5; i++) { setTimeout(() => console.log(i), 100); }var 无块级作用域，循环结束后 i 为 5，所有 setTimeout 回调都打印 5。let 每次迭代创建新绑定，输出 0-4。
4.数组 `sort` 不传比较函数，按字符串排序
✗ 错误
[10, 2, 1, 20].sort()✓ 修复
[10, 2, 1, 20].sort((a, b) => a - b)默认 sort 将元素转字符串比较，'10' < '2' 为 true，导致 [1, 10, 2, 20]。必须传数值比较函数。
5.严格模式下 `this` 为 `undefined` 而非全局对象
✗ 错误
'use strict'; function foo() { console.log(this); } foo();✓ 修复
'use strict'; function foo() { console.log(globalThis); } foo();非严格模式下函数内 this 指向 window/global，严格模式下为 undefined。沙盒环境默认可能启用严格模式，应使用 globalThis 访问全局对象。
6.字符串 `replace` 只替换第一个匹配
✗ 错误
'a-b-c'.replace('-', '/')✓ 修复
'a-b-c'.replace(/-/g, '/')replace 第一个参数为字符串或未加 g 标志的正则时，只替换第一处。全局替换必须用正则加 g 标志或 replaceAll。
7.数字与字符串相加导致类型隐式转换
✗ 错误
console.log(1 + '2' + 3)✓ 修复
console.log(1 + Number('2') + 3)JS 中 + 遇到字符串优先做拼接，1 + '2' 得 '12'，再 + 3 得 '123'。应显式转换数值类型。
8.`==` 宽松比较导致意外结果
✗ 错误
if ('' == false) { console.log('相等'); }✓ 修复
if ('' === false) { console.log('相等'); }== 会做类型转换，'' 和 false 都被转为 0 比较。=== 严格比较类型和值，避免隐式转换陷阱。
第三节
工作原理
How It Works核心公式
输出 = eval(输入代码)
变量说明
输入代码用户输入的 JavaScript 源码输出代码执行后的控制台结果
示例
输入代码为 console.log(2 + 3 * 4)，eval 执行后先计算 3*4=12，再计算 2+12=14，最终控制台输出 14。
用户输入
本地处理
输出结果
实时反馈
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。