边城就是我,我热爱编程!

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

因为这些工具的名称好多都包含“Fiddle”,所以统称为 Fiddle 类工具。顺手查了下词典,心都凉了半截!难道 fiddle 就这么不正经吗?

fiddle

英 [ˈfɪdl] 美 [ˈfɪdl]

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

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

JS Fiddle

JS Fiddle

JS Fiddle 是一款在线尝试 HTML/JavaScript/CSS 的工具。换句话说,它用于尝试和分享前端代码。我在社区回答需要呈现页面的前端问题时,非常喜欢使用 JS Fiddle 来分享代码。有一些问答社区,比如 SegmentFault,可双通过粘贴一个 Fiddle 的地址,自动完整的嵌入这个 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 中搜索匹配的资源供选择。

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

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

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

.NET Fiddle

边城工具集: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

边城工具集: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 工具,支持数十种语言,如果找不到更专业的 Fiddle,不妨来试试 jdoodle。不过 jdoodle 在保存代码之前需要先登录。

RunJS

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

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

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

CodePen

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

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

后记

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

如果写 .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 为线,带领大家了解软件开发的全过程。

彩蛋

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