codepen适合快速验证组件交互但默认禁用localstorage；jsfiddle不支持script type="module"且html面板自动包裹body；codesandbox vanilla模板支持多文件联动但免费版拦截非npm cdn；土薯html runner轻量但srcdoc iframe禁用fetch。
CodePen 适合快速验证组件交互，但默认禁用本地存储
CodePen 的实时预览响应快，对 addEventListener、fetch 等现代 API 支持稳定，但它的沙箱环境默认不启用 localStorage 和 sessionStorage——哪怕你写了 localStorage.setItem('test', 'ok')，控制台也不会报错，但刷新后数据就丢了。这是因为它运行在子域（如 cdpn.io）下，且未显式声明 allow-same-origin。如果你要测表单持久化或离线缓存逻辑，得手动在 Settings → JavaScript → “Add External Scripts/Pens” 里勾选 “Allow localStorage”，或者改用 srcdoc + iframe 自建沙箱。
JSFiddle 对老项目兼容性好，但 HTML 面板不支持 <script type="module"></script>
JSFiddle 的 HTML 面板会把所有内联脚本当作传统 <script></script> 执行，遇到 <script type="module"></script> 时直接忽略，不会报错也不会加载。现象是：你写了 import { foo } from './utils.js'，但控制台空空如也，页面也没反应。解决方法只有两个：
- 把模块代码挪到 JS 面板，并在 Settings → JavaScript 中选择 “ES6/Babel” 预处理器
- 改用 CodeSandbox 或 StackBlitz，它们原生支持多文件 + 模块解析
CodeSandbox 的 Vanilla 模板真能跑完整项目，但免费版限制第三方库 CDN
选 “Vanilla HTML/CSS/JS” 模板后，CodeSandbox 实际启动的是一个轻量 Node.js 服务（类似 serve），支持 index.html + style.css + script.js 多文件联动，连相对路径引用（如 <link rel="stylesheet" href="./style.css">）都正常工作。但它对免费用户屏蔽了非 npm 托管的外部资源：粘贴 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 会被静默拦截，控制台只显示 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT。绕过方式是——把该 CDN 地址复制进左侧面板的 “Dependencies” 搜索框，它会自动转为 npm 安装；或者改用 srcdoc 写死内容，避开网络请求。
国内工具如土薯 HTML Runner 更轻量，但不支持跨域 fetch
像 https://toolshu.com/html-runner 这类国产工具，优势是无注册、无广告、秒开，适合教学演示或面试写算法题。但它底层用的是纯前端 iframe.srcdoc 渲染，所有代码都在同源上下文执行，一旦你调用 fetch('https://api.example.com')，浏览器会直接抛出 TypeError: Failed to fetch ——不是 CORS 问题，而是因为 srcdoc iframe 没有完整的 fetch 权限。如果必须测试 API 调用，只能退回到本地起个 python -m http.server，或换用 Replit（它提供真实后端代理）。
sandbox="" 和 sandbox="allow-scripts" 表面只差一个属性，实际后者仍禁止 postMessage 到父页、禁止访问 parent.location，这些限制在调试跨 iframe 通信时极易被忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
