能实现，且有四种轻量方式：一是data:text/html, URL协议直接编码HTML并粘贴地址栏运行；二是用document.write()在DevTools控制台注入执行；三是iframe+srcdoc属性嵌入沙箱并动态更新；四是慎用CodePen等平台，因其依赖网络、存在隐私与调试限制。
不需要装软件、不依赖本地环境，只要打开浏览器就能写 HTML、看效果、改样式、调 JS——这事真能实现，而且比你想象中更轻量、更可靠。
用 data:text/html, URL 协议快速启动单页沙箱
这是最底层、最无依赖的“在线运行”方式：把 HTML 代码直接编码进 URL，浏览器原生支持，连服务器都不经过。
- 把你的 HTML（比如
<h1>Hello</h1>）URL 编码后拼到data:text/html,后面，例如：data:text/html,%3Ch1%3EHello%3C%2Fh1%3E - 粘贴进地址栏回车，立刻渲染，完全离线，刷新即重置
- 适合临时验证结构、测试纯静态片段，但注意：JS 执行受限（部分浏览器会禁用
eval、setTimeout等），且 URL 长度有上限（通常 ≤ 2MB） - 别用它跑带外部资源（如
<script src="https://cdn.com/jquery.js">）或大量 CSS 的代码，容易截断或触发安全拦截
在浏览器开发者工具里用 document.write() 快速注入并执行
当你已经打开任意网页（比如一个空白 tab 或百度首页），想秒级试一段 HTML+JS，不用跳转、不用新建文件。
- 按
F12打开 DevTools → Console 面板 - 输入：
document.write('<div onclick="alert(1)">Click me</div>');→ 回车 - 页面会被清空并渲染新内容，JS 事件也立即可用
- ⚠️ 注意：这会覆盖当前整个
document，慎用于生产页面；且无法保留原始 DOM 结构，仅适合隔离验证逻辑 - 如果只想局部替换，改用
document.body.innerHTML = '...'，但此时内联 JS 不会自动执行，得手动eval或创建<script>标签
用 iframe + srcdoc 实现可控、可销毁的嵌入式沙箱
这是前端自己搭轻量运行器时最实用的方案，比 data: 更稳定，比新开 tab 更可控，还能通信和监听错误。
立即学习“前端免费学习笔记（深入）”；
<iframe srcdoc="<h1>Test</h1><script>console.log('run')</script>" sandbox="allow-scripts"></iframe>-
srcdoc内容直接作为 iframe 的文档源，无需服务端响应，支持完整 HTML/CSS/JS -
sandbox属性是关键：默认禁用脚本、表单提交、弹窗等，加allow-scripts才能执行 JS，加allow-same-origin才能跨域读取内容（但会削弱隔离性，慎加） - 动态更新只需改
iframe.srcdoc属性，不触发页面跳转，适合编辑器实时预览 - 缺点：IE 不支持
srcdoc（需降级用data:或 Blob URL），且 iframe 内错误不会冒泡到父页面，要用iframe.contentWindow.onerror捕获
为什么别急着用 CodePen / JSFiddle 做日常调试
它们好用，但不是万能解药——尤其当你需要高频、私密、低延迟反馈时。
- 网络依赖强：每次保存都发请求，弱网下卡顿明显；离线完全不可用
- 隐私风险：代码默认上传到第三方服务器，含敏感逻辑或公司 UI 片段时要格外小心
- 控制力弱：你不能决定 JS 执行时机（比如想等某个 DOM 加载完再跑）、不能拦截 console 输出、不能注入自定义 polyfill
- 调试断点难：Chrome DevTools 的 Sources 面板里看不到你写的原始代码（被包裹在 eval 或 blob 中），堆栈也不直观
- 真正适合的场景是：分享演示、协作评审、查兼容性（多浏览器预览）、用现成库快速搭 demo
最易被忽略的一点：所有“零配置”方案都有隐性成本——data: 和 srcdoc 虽快，但缺乏错误定位能力；DevTools 注入虽灵活，却破坏上下文。选哪个，取决于你此刻要解决的是“能不能跑”，还是“为什么没跑”。
