无需登录 数据私有 本地保存

组件预览沙盒 - 隔离测试 React/Vue 组件

11
0
0
0
就绪
Component.jsx
1
实时预览
控制台输出将显示在这里...

常见问题与知识点

组件预览沙盒是一个隔离的在线测试环境，允许开发者在不搭建完整项目的情况下快速编写、预览和调试 React 或 Vue 组件。它类似于 CodePen/CodeSandbox 的轻量版，专注于单个组件的快速验证。典型用途包括：验证组件逻辑、测试 API 调用、分享代码片段、面试中的编码演示、以及快速原型设计。由于在隔离的 iframe 中运行，组件代码不会影响主页面。

使用非常简单：
① 选择框架（React 或 Vue 3）；
② 在左侧编辑器中编写组件代码；
③ 右侧实时预览（停止输入 400ms 后自动刷新）。

React 代码格式：React 和 ReactDOM 已全局可用，无需 import。使用 ReactDOM.render(<App />, document.getElementById('root')) 挂载组件。支持 JSX 语法和 Hooks。

Vue 3 代码格式：Vue 已全局可用，使用 Vue.createApp(组件选项).mount('#app') 挂载。支持选项式 API 和组合式 API（通过 Vue.ref、Vue.reactive 等）。

本工具使用 Babel Standalone（@babel/standalone）在浏览器端实时编译 JSX 代码。编译过程在主页面完成，编译后的纯 JavaScript 代码被注入到隔离的 iframe 中执行。这意味着你无需任何构建工具即可在浏览器中直接编写和运行 JSX。

注意：Babel Standalone 的体积约 2MB，首次加载需要一些时间。编译后的代码会缓存在浏览器中，后续预览会更快。如果遇到编译错误（如 JSX 语法错误），错误信息会显示在控制台面板中。

不完全支持。浏览器环境无法直接解析 .vue 单文件组件的 <template>、<script>、<style> 分离格式。本工具使用 Vue 3 的全局构建版本（包含模板编译器），支持在 JavaScript 中通过 template 字段定义模板，或使用渲染函数。

推荐写法：使用选项式 API的 template 选项，或组合式 API配合 template 字段。示例见预设模板。对于生产环境的 SFC，建议使用 Vite/webpack 等构建工具。

当前沙盒默认只加载了 React/Vue 核心库。如需使用第三方 UI 库，你可以在代码中动态加载 CDN 资源。例如：

React + Ant Design：在代码开头通过 document.createElement('script') 动态加载 antd 的 UMD CDN，然后在组件中使用 window.antd。

Vue + Element Plus：类似地加载 Element Plus 的 CDN 全局构建版本。

未来版本将加入常用 UI 库的一键加载功能。目前推荐使用内联样式或纯 CSS 来美化组件。

沙盒通过 postMessage 机制捕获 iframe 内部的 console 输出。在预览 iframe 中，console.log、console.warn、console.error 等方法被代理，输出会通过跨窗口消息发送到主页面，并显示在预览区下方的控制台面板中。这让你无需打开浏览器开发者工具就能看到调试信息。

点击预览面板右上角的"控制台"按钮可以展开/折叠控制台面板。错误信息（编译错误和运行时错误）也会在此显示，并用红色高亮标注。

① 单一职责：每个组件只测试一个功能点，保持代码简洁。
② 模拟数据：使用硬编码的 mock 数据代替真实 API 调用，确保测试可重复。
③ 边界情况：测试空状态、加载状态、错误状态等边界场景。
④ 样式隔离：组件样式应自包含，避免依赖外部 CSS。
⑤ 控制台调试：善用 console 输出来追踪组件生命周期和状态变化。
⑥ 保存模板：将常用的测试模板保存到本地，提高效率。本工具会自动将代码保存到 localStorage。

预览内容在带有 sandbox="allow-scripts" 属性的 iframe 中运行。这意味着：
• iframe 中的脚本无法访问父页面的 DOM、Cookie 或 localStorage；
• 无法进行同源 Ajax 请求；
• 无法触发父页面的导航或表单提交；
• postMessage 通信是受控的，仅用于传递 console 输出和错误信息。

这是一个安全可靠的隔离环境，你可以放心测试任何不受信任的组件代码，不会影响主站点的正常运行。
🔧 相关工具