代码演练场
在线 HTML、CSS 和 JavaScript 演练场,带实时预览、行号编辑器和控制台输出。即改即测,结果可下载为单个 HTML 文件——完全在浏览器中运行。
什么是代码演练场?
代码演练场是一个沙箱环境,你可以编写 HTML、CSS 和 JavaScript 并立即看到渲染结果。本工具还提供控制台捕获、带行号的编辑器,以及把作品下载为单个 HTML 文件的功能。
实时预览是怎么工作的?
三个代码面板会被组合成一个完整的 HTML 文档,并在沙箱 iframe 中渲染。开启自动运行后,停止输入约半秒即自动刷新预览;也可以手动点击“运行”。
控制台面板显示什么?
页面通过 console.log、console.info、console.warn、console.error 输出的所有内容,以及运行时错误和未处理的 Promise 拒绝(含行号)。每次运行都会清空。
刷新页面后代码会保存吗?
会。三个面板的草稿保存在浏览器本地,下次访问自动恢复。点击“重置”可回到默认示例代码,清除站点数据会删除草稿。
预览是沙箱化的吗?安全吗?
预览在无同源权限的沙箱 iframe 中运行,测试的脚本无法读取本页面及其 Cookie。但仍只测试你信任的代码,因为脚本依然在你的浏览器中执行。
可以把实验结果下载下来吗?
可以。点击“下载 .html”会把当前的 HTML、CSS 和 JavaScript 合并为一个独立的 HTML 文件,可在任意浏览器打开或分享给他人。
JavaScript 面板能运行什么?
标准浏览器 JavaScript:DOM 操作、事件、canvas、fetch 公共 API(受其 CORS 限制)、内联粘贴的库代码。不支持模块解析和 npm 包。
演练场需要联网吗?
仅在加载页面本身时需要。之后的编辑、预览和控制台捕获都在本地进行,你输入的代码不会被上传到任何地方。
如何使用代码演练场
这个演练场把你的 HTML、CSS 和 JavaScript 合并到浏览器内的沙箱实时预览中,控制台面板可捕获日志与错误。草稿会本地保存,随时接着上次的进度继续。
- 分别编辑 HTML、CSS 和 JavaScript 面板——每个编辑器都带行号和语法高亮。
- 开启自动运行后,输入即自动刷新预览;也可以关闭自动运行手动点击“运行”。
- 留意预览下方的控制台面板:console.log 输出、警告、错误和未捕获异常都会连同行号显示在这里。
- 点击“重置”可回到内置演示代码,或点击“下载 .html”把全部内容保存为一个独立文件。
- 使用“新窗口打开”可在独立标签页中全尺寸查看当前文档。
每次运行控制台都会清空,调试时可以放心多加 console.log——输出即时显示,无需打开浏览器控制台。
相关工具
- JavaScript美化器 免费在线JavaScript美化器和代码格式化器。立即将压缩或混乱的JS转换为整洁、可读、缩进规范的代码,支持自定义选项。
- JS压缩器 即时压缩JavaScript代码。移除空白、注释,优化JS以减小文件大小,加快加载速度。
- 正则表达式测试 实时测试和调试正则表达式,支持分组捕获和速查表。
- Markdown 预览器 免费在线 Markdown 编辑器,支持实时预览。编写、渲染和导出 Markdown,完整支持 GFM 表格、代码块和任务列表。
- 文件哈希校验 本地计算校验MD5、SHA-1、SHA-256、SHA-512文件哈希值
- Chmod 计算器 免费在线chmod计算器,通过复选框可视化Linux文件权限并计算chmod值。即时转换数字(755, 644)和符号(rwxr-xr-x)表示法,支持setuid、setgid、sticky bit等特殊权限。
- ASCII码表 完整的ASCII字符编码参考表,包含十进制、十六进制、八进制、二进制编码、HTML实体和字符描述。支持即时搜索和筛选。
- Hex文件查看器 以十六进制转储格式查看文件内容,支持搜索、偏移导航和虚拟滚动