邊城工具集：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 爲線，帶領你們瞭解軟件開發的全過程。

彩蛋