点击"运行"查看输出...
关于 JavaScript 在线运行器
JavaScript 代码运行工具在浏览器中直接执行 JS 代码并捕获 console.log、console.warn、console.error 和 console.info 的输出,同时显示代码执行耗时(毫秒级精度)。通过拦截 console 方法将输出重定向到页面面板,支持 ES6+ 语法包括箭头函数、async 与 await、可选链、空值合并和模板字面量。代码在浏览器沙箱中执行,无需安装 Node.js 或配置开发环境,适合快速验证代码片段、学习 JavaScript 语法和调试正则表达式。一个重要的边界是:这里跑在浏览器环境,而不是 Node.js——因此 require、fs、process 这类 Node 内置模块不可用,但你可以直接用浏览器原生 Web API。支持定义变量和函数后在后续代码中引用,适合分步调试复杂逻辑和验证算法实现的正确性。验证异步逻辑时可直接书写异步函数并在其中等待结果,输出会一并捕获。其余时间注意两条:一是不运行不可信的第三方代码,二是尽量避免改动当前页面的全局状态。
在浏览器里临时跑一小段脚本,是核对表达式行为、验证数据转换、以及快速试验某个接口返回值格式的高效方式:不必新建文件、不必配置运行环境,写完就能看到结果。它适合做「一次性验证」,不适合承担任何需要持久化的逻辑。 执行原理是利用浏览器自身的脚本引擎在受控环境中求值,因此脚本运行在与页面相同的运行时里。理解这一点很关键,因为它同时决定了能力与风险:能直接使用浏览器提供的接口(包括定时器与网络请求),也就意味着脚本可以发起请求、可以读写页面存储,因此在第三方页面上粘贴来路不明的脚本等于把页面的全部权限交给对方。 使用要点:把常用片段做成书签式的模板,例如格式化输出对象、统计数组长度与去重结果、以及把返回值转成表格便于粘贴。调试时优先使用显式的输出语句而不是仅依赖返回最后一行的值,因为隐式返回值在处理多语句时容易与预期不符。异步操作要显式等待,否则会得到「结果还没回来就打印了」的假象,这一条在核对接口返回时最容易踩。 边界与限制:浏览器环境与服务器环境差异很大,页面里能跑不代表在服务端能跑——模块加载方式、全局对象、以及可用接口都不同,用这里验证过的代码直接搬到构建流程里通常会失败。另外同步阻塞的长循环会冻结页面,处理大数据量时应分片或改在命令行执行。最后,脚本运行结果只存在于当前页面,刷新即丢失,需要留存的结果应主动复制或导出。 数据与隐私:本工具用于执行脚本文本,输入内容不会被上传,但脚本自身若发起网络请求则会带出来源信息。测试含令牌或用户数据的接口时,请先确认请求目标可信,并避免把生产凭据硬编码在脚本里。
典型误用是把这里验证过的代码直接搬进构建流程:浏览器与服务器的模块加载、全局对象与可用接口都不同,本地能跑的片段在 Node 环境往往会失败。另一个误用是执行长同步循环,会冻结页面直至计算结束;处理大数据量应分片或改在命令行完成。脚本结果只存在于当前页面,刷新即丢失。
实现原理
执行利用浏览器自身的脚本引擎在受控环境中求值,因此脚本运行在与页面相同的运行时里——能直接使用定时器与网络接口,也就意味着可以发起请求、读写页面存储。理解这一点同时解释了它的能力与风险:粘贴来路不明的脚本等于把页面的全部权限交出去。
console.log([1,2,2].filter((v,i,a)=>a.indexOf(v)===i))[1, 2](就地去重,结果与执行环境一致)本页实测数据
| 输出捕获 | console.log('hi', 1+1) → hi 2;对象与数组按 JSON 缩进打印,不是 [object Object] |
|---|---|
| 错误捕获 | console.error('bad') → ❌ bad;throw new Error('boom') → ❌ boom,页面不崩 |
| 修复:异步输出 | setTimeout 里 50ms 后的 console.log 此前完全丢失(面板停在「(无输出)」) |
| 裸表达式 | 直接写 1+1 不会打印 2——本工具只捕获 console 输出,不看表达式返回值 |
| 实现方式 | 实际用 new Function 在页面运行时执行,**不是** iframe 隔离;meta 描述原写「运行环境与页面隔离」已改正 |
| 多行含空行 | 两行 console.log 之间有空行也不影响输出 |
这个工具跑在页面自己的运行时里,脚本能读写 document、localStorage,也能发网络请求——所以「别运行来路不明的代码」不是客套话,粘贴等于把页面权限交出去。异步输出现在有 500ms 捕获窗口,超过这个时间的日志仍会丢,需要等待的异步逻辑请显式 await。裸表达式不打印结果:调试时统一用 console.log 包裹,别依赖「最后一行会显示」的直觉。
使用方法
- 打开「JavaScript 在线运行器」
- 输入或粘贴待处理的内容
- 根据需要调整输出选项
- 点击「运行」按钮,结果实时显示
- 复制或导出结果
使用场景
- 快速验证算法 — 粘贴代码片段,立即看到执行结果和输出。
- 学习 JavaScript — 边学边练,实时查看代码运行效果。
- 调试正则表达式 — 快速测试正则匹配结果,无需切换到其他工具。
- 验证数据处理逻辑 — 测试 JSON 解析、数组操作等数据处理代码。
- 分步调试 — 先定义变量与函数,再在后续代码里引用,逐步验证复杂逻辑。
- 分享可运行片段 — 在文档或论坛恢复可复现的 JS 示例,方便别人直接跑通确认。
常见问题
安全吗?
代码在浏览器中通过 new Function 执行,隔离了全局作用域。但请不要运行不受信任的代码。
支持 ES6+ 吗?
支持。浏览器原生支持所有现代 JavaScript 语法,包括 async/await、箭头函数、解构等。
能用 DOM API 吗?
可以访问 document 和 window 对象,但修改可能影响当前页面。建议仅做纯逻辑运算。
支持 Node.js API 吗?
不支持。这是浏览器环境,没有 require、fs、process 等 Node.js API。
异步代码能跑吗?
能。你可以写 async 函数并在其中 await,跑完后再把输出一并展示,配合毫秒级耗时便于核对。
能捕获未捕获的异常吗?
会。抛出的错误会被捕获并以红色输出到面板并给出堆栈,方便定位是哪一行出的问题。
在浏览器里跑 JS 和 Node 环境有什么区别?
最大差异是全局对象与能力:浏览器没有 require/fs/process,但多了 window/document/localStorage。涉及文件、网络请求(跨域)、Node API 的代码会报错。纯算法、数组操作、字符串处理等逻辑代码两边表现一致。
console.log 的输出在哪里看?
工具把 console 输出捕获到结果面板里,不需要打开 DevTools。注意 console.table、对象展开在某些实现里显示为序列化文本;复杂对象建议 JSON.stringify 后再 log,输出最稳定。