JSFiddle是一个在线代码 playground,主要用于测试和运行HTML、CSS、JavaScript及相关预处理器代码。以下是网站的主要功能与板块介绍:
1. 核心代码编辑与运行功能
多语言与预处理器支持:
HTML可选择HAML语法;JavaScript支持CoffeeScript、Babel+JSX、TypeScript、Vue、React、Preact等;CSS支持SCSS、SASS、PostCSS(Stage 0+/3+)、Tailwind CSS等。
代码配置选项:
HTML可选择Doctype(如HTML5、XHTML 1.0 Strict等)和Body标签设置;JavaScript可添加Alpine.js、AngularJS、D3、React等扩展库;CSS可选择重置样式。
实时交互功能:
支持自动运行代码、仅运行验证通过的代码、自动保存代码;热重载CSS(修改后即时更新样式)、热重载HTML(实验性,即时更新结构);结果面板会跟随主题(浅色/深色)变化。
2. AI代码补全(Beta)
基于Mistral的Codestral模型提供AI代码补全功能,需用户自行提供Mistral API Key(BYOK,浏览器存储Key,不保存至数据库)。补全时会结合HTML、CSS、JS三个面板的上下文提供建议。
3. 资源与工具
外部资源管理:
可通过CDNJS搜索并添加库(如jQuery、Three.js等),或直接将URL作为SCRIPT/LINK标签插入HTML面板。
异步请求模拟:
提供JSON(`/echo/json/`)、JSONP(`/echo/jsonp/`)、HTML(`/echo/html/`)、XML(`/echo/xml/`)的模拟接口,方便测试异步逻辑。
JSFiddle Apps:
内置小工具,如颜色 palette 生成器(一键生成配色)、CSS Flexbox生成器(可视化创建Flex布局)。
4. 个性化设置
编辑器行为:
可开启行号、自动换行、缩进(2/4空格)、代码自动补全;设置字体大小(默认、大、更大等)。
控制台设置:
选择是否在编辑器内显示控制台,是否在运行代码时清空控制台。
主题与外观:
支持浅色、深色主题,或跟随系统OS设置;代码格式使用Prettier,校验用Stylelint。
5. PRO会员功能
无广告(编辑器与列表页完全去广告);
提前使用预发布功能(如颜色生成器);
可创建 fiddle 集合(分类管理代码项目);
私有集合与私有 fiddle(保护代码隐私);
内置JavaScript控制台(调试更方便);
优先体验早期AI功能。
6. 代码管理与分享
最近 fiddle 管理:
登录或未登录状态都能查看最近创建的 fiddle,未登录的 fiddle 会暂存(后期可登录转存);支持设置 fiddle 过期时间(1天、10天、1个月至永久)。
下载与分享:
可下载 fiddle 为ZIP压缩的单HTML文件;支持生成嵌入代码(非自适应/阻塞父页面)或iframe,用于分享到其他网站。
模块导入:
可将其他 fiddle 作为模块导入(JS用`import [name] from ‘@jsfiddle/[username]/[fiddle].js’`,CSS用`@import url(‘@jsfiddle/[username]/[fiddle].css’)`)。
7. 其他更新与优化
编辑器从CodeMirror切换到Monaco(与VSCode同款),功能更丰富;
JS bundle体积缩小30%,加载更快;
支持Tailwind CSS(需在CSS面板选择),配合HTML热重载使用更高效;
代码 lint 与格式化工具升级为Stylelint(CSS)和Prettier(通用);
3.0版本更新了UI,支持系统主题、结果面板主题同步、标题描述合并为单个字段、公共 profile 页重新设计。
