边城工具集：在线 Fiddle 类工具

Posted 2020-12-31

边城就是我，我热爱编程！我使用的工具集中大部分都会与编程相关，但也不全是，今天跟大家分享一些用于分享代码的在线工具。因为这些工具的名称好多都包含“Fiddle”，所以统称为 Fiddle 类工具。顺手查了下词典，心都凉了半截！难道 Fiddle 类工具就这么不正经吗？

fiddle

英 [?f?dl] 美 [?f?dl]

• n.
  >小提琴;[航]桌面柜;〈非〉胡扯，无聊;欺诈，欺骗行为
• vi.
  > 拉小提琴;神经质地摆弄手指或手;瞎搞，胡混;干预，篡改
• vt.
  > 用提琴演奏（乐曲）;欺诈，欺骗;伪造

实际上 fiddle 这个词有不断摆弄和调整、调校的意思。所以这里分享的 Fiddle 类工具有让你不断修改、调整、试错的功能，而且他们中的大部分还具有分享和协作的功能，可以让大家一起来修改程序。

JS Fiddle

JS Fiddle 是一款在线尝试 html/javascript/CSS 的工具。换句话说，它用于尝试和分享前端代码。我在社区回答需要呈现页面的前端问题时，非常喜欢使用 JS Fiddle 来分享代码。有一些问答社区，比如 SegmentFault，可双通过粘贴一个 Fiddle 的地址，自动完整的嵌入这个 Fiddle，就像这样

作为一个资深答者，我也很希望提问的同学可以将遇到的问题写在一个 Fiddle，以便于回答问题的人可以基于产生问题的代码和环境进行调试。

JS Fiddle 除了支持最基本的 HTML/JavaScript/CSS 之外，还支持

• 多种 HTML/XHTML 版本
• CSS 相关
  • SCSS
• 多种前端语言
  • TypeScript
  • CoffeeScript
  • Babel + JSF
• 多种 JavaScript 库
  • Vue
  • React
  • AngularJS
  • jQuery
  • ……
• 不同的脚本位置
  • On Load
  • On DOM Ready
  • </head> 前
  • </body> 前

如果需要使用的资源不在 JS Fiddle 预备的资源之内，可以在从左侧面板的 Resources 处添加资源。添加资源支持粘贴 URL（最好是 HTTPS 的）或者直接输入资源名称，它会在 CDNJS 中搜索匹配的资源供选择。

JS Fiddle 界面右上角的 Settings 可以配置布局、显示网络和代码风格等；左上的 Run 在完成代码之后查看运行效果（也可以配置成自动运行）；而 Run 右边的 Save/Update 用来保存和分享 Fiddle —— 不得不赞的是 Fiddle 可以多版本并存，它每次更新都会产生了一新的 URL（在 Fiddle Key 的基础上后缀一个持续累加的数字），原来保存的 Fiddle 并不会被覆盖掉。

JS Fiddle 的功能很强大，不过因为是国外的服务，有时候速度会稍显迟滞。

.NET Fiddle

顾名思义，.NET Fiddle 就是用来尝试和分享 .NET 程序的在线工具了。它非常适合进行 .NET 代码段的临时性单元测试。

.NET Fiddle 支持 C#、VB.NET、F# 等语言，支持 .NET 4.5 和 Roslyn 2.0 两种编译工具。一般我们只需要在默认的 Console 类型项目环境中尝试代码，不过 .NET Fiddle 提供的 Script 方式也是个不错的选择。甚至它还支持 Nancy 和 MVC 两个 Web 框架（上图就是 Nancy 项目示例）。

SQL Fiddle

没想到，SQL 也有 Fiddle 工具。SQL Fiddle 支持好几种数据库，而且版本都还比较新

• mysql 5.6
• Oracle 11g
• PostgreSQL 9.6
• PostgreSQL 9.3
• SQLite (WebSQL)
• SQLite (SQL.js)
• MS SQL Server 2017

写 SQL Fiddle 分两步：第 1 步创建表和插入试验数据，记得完成后点击 Build Schema 按钮执行。第 2 步写查询语句并执行。

Build Schema 之后，地址栏的 URL 就可以用于分享，不过这个分享只包含键表相关的 SQL。如果需要分享查询语句和结果，需要在右侧完成 SQL 并执行查询后，通过结果表格下面的 Link 链接分享。

jdoodle

这是一个神奇的 Fiddle 工具，支持数十种语言，如果找不到更专业的 Fiddle，不妨来试试 jdoodle。不过 jdoodle 在保存代码之前需要先登录。

RunJS

RunJS 是国产的前端试验基地，和 JS Fiddle 相似。RunJS 的生态比 JS Fiddle 更好，提供了广场和插件两大功能区，加强了用户之间的展示、分享和交流。

RunJS 的保存和分享都需要事先登录，如果需要修改别人的代码需要先 Fork。所以与 JS Fiddle 相比，RunJS 适合更纯粹、更系统的代码交流，而 JS Fiddle 则适用于临时性协作和交流。

CodePen

老实说我从来没用过 CodePen。之所以把它拿出来，纯粹是因为我这么多年翻译英文博客的过程中，CodePen 的出境率太高了。看起来是和 RunJS 非常相似的一个工具。如果读者们经常在外文网站分享技术，可以考虑使用这个工具。

后记

上述几个工具用，使用频次较高的恐怕都是前端类的 JS Fiddle、RunJS 等，但除此之外，还有一些工具的官方网站提供的试验场，比如

• TypeScript 的 Playground

• Babel 的 Try it out

• Kotlin 的 Try online

如果写 .NET 程序，打开 .NET Fiddle 确实比打开 Visual Studio 容易一些。但是如果已经打开了 Visual Studio (2015+)，它自带的 C# Interactive 和 F# Interactive 都很不错。

至于数据库，我相信大家更喜欢使用专业的客户端工具，比如 SQL Server Management Studio、HeidySQL，Navicat 等。如果需要在线分享，从这些工具里导出 SQL 再拷贝到 SQL Fiddle 也不失为一个好办法。

除了这次分享的 Fiddle 类工具，我还有好多日常使用的其他工具想分享给大家，将在后续博客中陆续分享出来，请大家关注品鉴。

在这个工具满天飞的年代，相信你一定会找到适合自己的工具。如果你找到了，不妨在评论中分享！

最后，欢迎大家订阅我的专栏《JavaScript 全栈工程师养成记》，这是我 20 年软件开发生涯的经验总结，力求通过轻松简洁的描述和示例，以 JavaScript 为线，带领大家了解软件开发的全过程。