JSFiddle

从空白代码到可见结果

首页直接进入一个 Fiddle 编辑器，工作区分成 HTML、CSS、JavaScript 三个代码面板，以及一个展示运行结果的区域。面板之间可以调整布局，编辑器工具栏提供运行入口。对只想验证一个短片段的人来说，不必先搭建本地项目、配置构建工具或创建文件目录。

空白页面默认代码很少，便于从最小示例开始。输入结构标记后点击运行，JSFiddle 会把代码放进独立的预览区域；例如加入一个标题和段落，结果面板就能显示真实的排版，而代码仍留在左侧编辑器中。这个隔离的预览让开发者能迅速观察结构与浏览器输出是否一致，也适合制作能够复现问题的简短测试用例。

编辑器还提供控制台区域，帮助查看运行时消息。遇到现象不符合预期时，可以先检查代码是否真的执行，再逐步缩小问题范围。由于示例运行在浏览器页面中，浏览器支持情况、外部资源可达性和页面安全策略仍会影响结果；它适合快速验证前端行为，不等同于完整的生产构建或端到端测试环境。

三个代码面板各自负责什么

HTML 面板用于描述页面结构。官方帮助文档说明，编辑器会自动补充文档框架，因此通常不必自行添加 doctype、head 和 body 外壳。CSS 面板负责样式，除了普通 CSS，也可以从设置中选择 SCSS 预处理器。JavaScript 面板负责交互行为，帮助页列出 TypeScript、CoffeeScript、Babel、Vue、React 等语言或预处理选项，以及多种框架和扩展。

这种分区方式把一个浏览器界面拆成容易检查的几部分：结构变化写在 HTML，视觉规则放进 CSS，按钮事件和数据处理放进 JavaScript。测试时可以只改动相关面板，不必在多个文件间来回切换。需要调整 body 标签、doctype、框架加载顺序或脚本运行时机时，面板设置还提供相应选项；文档中列出了 On Load、On DOM Ready 和不包装代码等加载方式。

官方帮助页有部分内容多年没有更新，因此具体选项应以当前编辑器实际显示为准。使用较新的库或框架时，可以先确认它是否出现在当前设置菜单，再决定是否把示例建立在它上面。这个提醒对教程作者尤其重要：文档可以提供入口线索，但不能替代实际运行验证。

模板、库和外部资源

空白编辑器的结果区域会展示可选的起步模板，页面中能看到 Tailwind 样例、JavaScript 模块导入、jQuery、React 与 JSX、Preact、TypeScript、CoffeeScript、SCSS、CSS Grid、Bootstrap 和 PostCSS 等入口。选择模板可以快速搭出对应语法或依赖环境，随后再替换成自己的代码。模板适合学习和试验，但它不会自动替代项目级的依赖管理、版本锁定与发布配置。

左侧还有 CDNJS 资源入口。帮助文档说明，外部资源可以通过网络 URL 添加，也可以从 CDNJS 的库名建议中选取；加载第三方脚本或样式后，示例能够直接引用它们。外部资源的版本号和地址应主动核对，避免使用失效链接或默认漂移的版本。页面还列有异步请求帮助入口，不过跨域限制、接口鉴权和网络策略仍由目标服务决定。

这些能力让一个 Fiddle 可以专注于展示某个组件、CSS 技巧或问题复现步骤，而不必复制整套应用。反过来，如果片段依赖大量本地文件、服务端状态、构建插件或私有环境变量，就不适合把它简化成单页实验；这时应保留完整项目作为复现材料。

分享、嵌入与版本记录

官方帮助文档介绍了保存、更新和 Fork 操作：更新一个 Fiddle 会产生新的版本，Fork 则从现有示例分出一个独立项目。文档也说明，设置基础版本的功能仅对已登录用户开放；当前页面侧栏能看到登录入口。因此，匿名访问者可以直接编辑并运行临时示例，但是否能长期保存、管理个人列表或调整版本，需要按当前账号状态核实。

嵌入文档提供 iframe 和脚本两种展示方式。iframe 适合把结果放进文章、教程或工单；脚本嵌入可自动调整内容高度，并减少对页面渲染的阻塞。嵌入地址还允许选择显示哪些面板、调整面板顺序、切换浅色或深色主题以及设置强调色。把结果放在首位、隐藏不必要的代码区，能让读者更快看到示例用途。

这些分享形式适合代码片段、产品演示、教程和缺陷报告。公开示例应避免放入访问令牌、真实用户数据或内部地址；即使代码本身无害，嵌入页面也会让访问者看到所选择的面板与运行结果。发布之前先检查内容和引用资源，比单纯复制分享链接更稳妥。

免费使用与 PRO 边界

当前 PRO 页面把额外能力列为关闭编辑器和列表页广告、用自定义域名和路径访问 Fiddle Pages、提前体验部分功能、整理 Fiddle 收藏，以及创建私有 Fiddle 和私有收藏。页面显示的支持计划为每月八欧元，或一次性八十欧元使用一年；币种、促销和套餐可能调整，购买前应以页面当前展示为准。

免费页面可以直接打开编辑器并运行代码。PRO 中的私有项目、私有收藏和自定义 Fiddle Pages 属于付费扩展，不能与匿名临时试验混为一谈。若只想比较语法、检查样式或制作公开复现链接，可以先从免费编辑器开始；若需要长期组织示例、隐藏内容或使用个人域名，再评估账户和套餐是否匹配。

适合的场景与需要留意的地方

JSFiddle 的优势在于启动成本低、面板分工清楚、运行反馈直接，适合快速试验前端片段、演示组件、讨论 CSS 表现和构造最小问题案例。教师可以把一个简短示例作为课堂演示起点；维护开源项目的人可以把复现步骤与缺陷报告关联；开发者也可以先验证某个库的基础用法，再决定是否放进正式项目。

它不适合替代完整 IDE、源码仓库或部署系统。页面上能选择许多框架和预处理方式，并不代表每个组合都满足当前项目的版本、安全和构建要求。长时间维护的代码仍应进入本地仓库，使用项目自己的依赖清单、测试和构建流程；JSFiddle 更像一个共享的浏览器草稿本。

匿名访问者可以直接在首页编辑 HTML，运行后结果区域会显示输出；页面侧栏同时提供登录入口，部分功能标记为 PRO。帮助中心提供编辑器设置、外部资源、嵌入和 API 等说明，但部分帮助页标注多年前更新。可把它作为验证与分享工具使用，涉及保存权限、框架版本、付费功能或嵌入行为时，再对照当下页面确认。