边城工具集：Fiddle 类工具助力在线测试和协做代码

边城就是我，我热爱编程！

我在《JavaScript 全栈工程师养成记》中基于 JavaScript 介绍了较为完整的软件开发知识，却没有说起平常使用的各类工具。我使用的工具集中大部分都会与编程相关，今天跟你们分享一些用于分享代码的在线工具。由于这些工具的名称好多都包含“Fiddle”，因此统称为 Fiddle 类工具。

由于这些工具的名称好多都包含“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 为线，带领你们了解软件开发的全过程。

彩蛋