打开浏览器，线前敲几个字符，端代页面立刻变了样。码编这不是辑器什么魔法，就是线前在线前端代码编辑器干的事。我第一次用CodePen是端代在2015年，当时想调一个CSS动画，码编本地开编辑器太麻烦，辑器同事甩了个链接过来，线前说“你直接在上面改”。端代那感觉像从DOS跳进了图形界面——左边HTML，码编中间CSS，辑器右边JavaScript，线前底下实时预览，端代改一行颜色，码编预览区马上跟着变。

这东西的核心逻辑不复杂：一个页面里塞进三个代码输入区，用iframe把拼接好的代码渲染出来。但细节决定体验。比如CodePen的自动保存，你哪怕关掉标签页，下次打开草稿还在。JSFiddle更早，2009年就有了，界面朴素得像记事本，可当年调试jQuery插件全靠它。StackBlitz走另一条路，直接在浏览器里跑了个Node.js环境，能装npm包，能跑Angular和React的完整项目。第一次见的时候我愣了几秒——这玩意儿居然能在浏览器里编译。

为什么有人放着VS Code不用，非要去网页上写代码？场景其实很具体。面试的时候，面试官发个链接让你写个防抖函数，你总不能让人家装环境。写技术博客的时候，嵌入一个可运行的示例，读者点开就能改参数看效果，比贴截图强十倍。还有教新手的时候，不用讲“你先装Node，再配环境变量”，直接给个链接，三分钟出成果，正反馈来得快。

不过在线编辑器有个硬伤：网络一断，全完。有次在高铁上想改个demo，信号时断时续，代码同步卡成幻灯片。另外大型项目还是得回本地，Webpack的构建速度、TypeScript的类型检查、Git的版本管理，网页端要么做不到，要么做得别扭。StackBlitz算走得最远的，但跟本地比还是两码事。我的判断是：在线编辑器适合“小、快、灵”的场景，超过500行代码就该考虑搬家了。

选哪个用？看需求。临时调样式、分享代码片段，CodePen最顺手，社区活跃，搜个“loading animation”能翻出几千个现成效果。要跑完整的Vue或React项目，StackBlitz更合适，它甚至能连GitHub仓库。JSFiddle老归老，但兼容性最好，老浏览器上也能跑。至于CodeSandbox，团队协作功能做得细，多人同时编辑一个文件不打架，适合远程结对编程。

有个细节值得说：这些编辑器都在拼“零配置”。以前建个React项目要半小时，现在打开CodeSandbox选个模板，十秒进入编码状态。这背后是浏览器能力的边界在往外推——WebAssembly、Service Worker、IndexedDB，一个个补上了当年网页端缺的拼图。我去年用StackBlitz跑一个Vite项目，热更新速度跟本地几乎没差别，那一刻真觉得本地编辑器的护城河又窄了一截。

但别误会，这不是要取代谁。在线编辑器的价值在于“降低摩擦”，把“我想试试”和“我试了”之间的步骤压到最少。你有个想法，打开网页，写三行代码，看到结果，整个过程不到一分钟。这种即时满足感，本地环境给不了。至于复杂工程，该用本地还是用本地，工具各司其职，没必要非此即彼。

下次你想快速验证一个CSS属性，或者给朋友展示一段代码，别急着开IDE。搜个在线编辑器，粘进去，改两下，链接一发。省下的时间够你喝杯咖啡。