改完 CSS 立刻出预览：JSFiddle 分栏调试网页片段

调一个 hover 效果，本地改完要刷新、要切窗口看；或者要问别人一段布局为什么塌了，文字说不清 —— 一个四栏并排、改完立即出预览的编辑器最对口。

它解决什么问题

调样式要反复切窗口刷新，注意力总被打断。

想让人看一段布局问题，截图说不清结构关系。

核心能力

用四栏把问题拆干净

JSFiddle 把结构、样式、脚本、结果摆在同一屏，逼你把问题拆成最小可运行单元。调 CSS 时左边写右边看，不用切窗口；问人时把 fiddle 链接一发，对方看到的就是你看到的结构，省去大量口头描述。

匿名可运行但保存要登录，私有档也在登录后。它的强项是前端片段验证，不是工程开发；依赖要从 CDN 加载，离线用不了。把大项目整体搬进来并不划算，只搬出问题的那一块才高效。

谁适合用

• 调前端样式、想要即写即看的人
• 要给别人发可运行布局示例的人
• 验证某个库用法、快速起 demo 的人
• 写教程、需要可嵌入示例的人

怎么开始

1. 打开 jsfiddle.net，上方四栏分别放 HTML、CSS、JS。
2. 结果栏自动刷新，改完立刻看到效果。
3. 用左侧下拉挂需要的外部库，免手动引 CDN。
4. 登录后可保存 fiddle 并复制链接分享。
5. 点嵌入可拿到代码，放进自己的页面里展示。

常见问题

需要登录吗？
运行不用；保存与私有需登录账号。

和本地写有何不同？
同屏四栏即写即看，适合片段验证，不适合整工程。

能离线用吗？
不能，外部库走 CDN，需联网加载。

免费够用吗？
日常调试足够，无需付费。

授权与合规

JSFiddle 开源免费，四栏编辑即写即看；保存与设为私有需登录，日常调试免费档足够。源码以开源形式托管。 官网：jsfiddle.net。