邊城工具集：Fiddle 類工具助力在線測試和協(xié)作代碼

邊城就是我，我熱愛編程！

我在《JavaScript 全棧工程師養(yǎng)成記》中基于 JavaScript 介紹了較為完整的軟件開發(fā)知識，卻沒有提及日常使用的各種工具。我使用的工具集中大部分都會與編程相關(guān)，今天跟大家分享一些用于分享代碼的在線工具。因為這些工具的名稱好多都包含“Fiddle”，所以統(tǒng)稱為 Fiddle 類工具。

因為這些工具的名稱好多都包含“Fiddle”，所以統(tǒng)稱為 Fiddle 類工具。順手查了下詞典，心都涼了半截！難道 fiddle 就這么不正經(jīng)嗎？

fiddle

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

• n.
  小提琴;[航]桌面柜;〈非〉胡扯，無聊;欺詐，欺騙行為
• vi.
  拉小提琴;神經(jīng)質(zhì)地擺弄手指或手;瞎搞，胡混;干預(yù)，篡改
• vt.
  用提琴演奏（樂曲）;欺詐，欺騙;偽造

實際上 fiddle 這個詞有不斷擺弄和調(diào)整、調(diào)校的意思。所以這里分享的 Fiddle 類工具有讓你不斷修改、調(diào)整、試錯的功能，而且他們中的大部分還具有分享和協(xié)作的功能，可以讓大家一起來修改程序。

JS Fiddle

JS Fiddle 是一款在線嘗試 HTML/JavaScript/CSS 的工具。換句話說，它用于嘗試和分享前端代碼。我在社區(qū)回答需要呈現(xiàn)頁面的前端問題時，非常喜歡使用 JS Fiddle 來分享代碼。有一些問答社區(qū)，比如 SegmentFault，可雙通過粘貼一個 Fiddle 的地址，自動完整的嵌入這個 Fiddle，就像這樣

作為一個資深答者，我也很希望提問的同學(xué)可以將遇到的問題寫在一個 Fiddle，以便于回答問題的人可以基于產(chǎn)生問題的代碼和環(huán)境進行調(diào)試。

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

• 多種 HTML/XHTML 版本
• CSS 相關(guān)
  • SCSS
• 多種前端語言
  • TypeScript
  • CoffeeScript
  • Babel + JSF
• 多種 JavaScript 庫
  • Vue
  • React
  • AngularJS
  • jQuery
  • ……
• 不同的腳本位置
  • On Load
  • On DOM Ready
  • </head> 前
  • </body> 前

如果需要使用的資源不在 JS Fiddle 預(yù)備的資源之內(nèi)，可以在從左側(cè)面板的 Resources 處添加資源。添加資源支持粘貼 URL（最好是 HTTPS 的）或者直接輸入資源名稱，它會在 CDNJS 中搜索匹配的資源供選擇。

JS Fiddle 界面右上角的 Settings 可以配置布局、顯示網(wǎng)絡(luò)和代碼風(fēng)格等；左上的 Run 在完成代碼之后查看運行效果（也可以配置成自動運行）；而 Run 右邊的 Save/Update 用來保存和分享 Fiddle —— 不得不贊的是 Fiddle 可以多版本并存，它每次更新都會產(chǎn)生了一新的 URL（在 Fiddle Key 的基礎(chǔ)上后綴一個持續(xù)累加的數(shù)字），原來保存的 Fiddle 并不會被覆蓋掉。

JS Fiddle 的功能很強大，不過因為是國外的服務(wù)，有時候速度會稍顯遲滯。

.NET Fiddle

顧名思義，.NET Fiddle 就是用來嘗試和分享 .NET 程序的在線工具了。它非常適合進行 .NET 代碼段的臨時性單元測試。

.NET Fiddle 支持 C#、VB.NET、F# 等語言，支持 .NET 4.5 和 Roslyn 2.0 兩種編譯工具。一般我們只需要在默認(rèn)的 Console 類型項目環(huán)境中嘗試代碼，不過 .NET Fiddle 提供的 Script 方式也是個不錯的選擇。甚至它還支持 Nancy 和 MVC 兩個 Web 框架（上圖就是 Nancy 項目示例）。

SQL Fiddle

沒想到，SQL 也有 Fiddle 工具。SQL Fiddle 支持好幾種數(shù)據(jù)庫，而且版本都還比較新

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

寫 SQL Fiddle 分兩步：第 1 步創(chuàng)建表和插入試驗數(shù)據(jù)，記得完成后點擊 Build Schema 按鈕執(zhí)行。第 2 步寫查詢語句并執(zhí)行。

Build Schema 之后，地址欄的 URL 就可以用于分享，不過這個分享只包含鍵表相關(guān)的 SQL。如果需要分享查詢語句和結(jié)果，需要在右側(cè)完成 SQL 并執(zhí)行查詢后，通過結(jié)果表格下面的 Link 鏈接分享。

jdoodle

這是一個神奇的 Fiddle 工具，支持?jǐn)?shù)十種語言，如果找不到更專業(yè)的 Fiddle，不妨來試試 jdoodle。不過 jdoodle 在保存代碼之前需要先登錄。

RunJS

RunJS 是國產(chǎn)的前端試驗基地，和 JS Fiddle 相似。RunJS 的生態(tài)比 JS Fiddle 更好，提供了廣場和插件兩大功能區(qū)，加強了用戶之間的展示、分享和交流。

RunJS 的保存和分享都需要事先登錄，如果需要修改別人的代碼需要先 Fork。所以與 JS Fiddle 相比，RunJS 適合更純粹、更系統(tǒng)的代碼交流，而 JS Fiddle 則適用于臨時性協(xié)作和交流。

CodePen

老實說我從來沒用過 CodePen。之所以把它拿出來，純粹是因為我這么多年翻譯英文博客的過程中，CodePen 的出境率太高了?？雌饋硎呛?RunJS 非常相似的一個工具。如果讀者們經(jīng)常在外文網(wǎng)站分享技術(shù)，可以考慮使用這個工具。

后記

上述幾個工具用，使用頻次較高的恐怕都是前端類的 JS Fiddle、RunJS 等，但除此之外，還有一些工具的官方網(wǎng)站提供的試驗場，比如

• TypeScript 的 Playground

• Babel 的 Try it out

• Kotlin 的 Try online

如果寫 .NET 程序，打開 .NET Fiddle 確實比打開 Visual Studio 容易一些。但是如果已經(jīng)打開了 Visual Studio (2015+)，它自帶的 C# Interactive 和 F# Interactive 都很不錯。

至于數(shù)據(jù)庫，我相信大家更喜歡使用專業(yè)的客戶端工具，比如 SQL Server Management Studio、HeidySQL，Navicat 等。如果需要在線分享，從這些工具里導(dǎo)出 SQL 再拷貝到 SQL Fiddle 也不失為一個好辦法。

除了這次分享的 Fiddle 類工具，我還有好多日常使用的其他工具想分享給大家，將在后續(xù)博客中陸續(xù)分享出來，請大家關(guān)注品鑒。

在這個工具滿天飛的年代，相信你一定會找到適合自己的工具。如果你找到了，不妨在評論中分享！

最后，歡迎大家訂閱我的專欄《JavaScript 全棧工程師養(yǎng)成記》，這是我 20 年軟件開發(fā)生涯的經(jīng)驗總結(jié)，力求通過輕松簡潔的描述和示例，以 JavaScript 為線，帶領(lǐng)大家了解軟件開發(fā)的全過程。

彩蛋