邊城工具集:Fiddle 類工具助力線上測試和協作程式碼

邊城發表於2018-08-27

邊城就是我,我熱愛程式設計!

我在《JavaScript 全棧工程師養成記》中基於 JavaScript 介紹了較為完整的軟體開發知識,卻沒有提及日常使用的各種工具。我使用的工具集中大部分都會與程式設計相關,今天跟大家分享一些用於分享程式碼的線上工具。因為這些工具的名稱好多都包含“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 為線,帶領大家瞭解軟體開發的全過程。

clipboard.png

相關文章