邊城工具集：Fiddle類(lèi)工具助力在線測(cè)試和協(xié)作代碼-創(chuàng)新互聯(lián)

邊城就是我，我熱愛(ài)編程！

專(zhuān)業(yè)從事網(wǎng)站建設(shè)、做網(wǎng)站,高端網(wǎng)站制作設(shè)計(jì),小程序設(shè)計(jì),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠(chéng)服務(wù)，采用H5開(kāi)發(fā)+CSS3前端渲染技術(shù)，響應(yīng)式網(wǎng)站開(kāi)發(fā)，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過(guò)程建立專(zhuān)項(xiàng)小組，與您實(shí)時(shí)在線互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。

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

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

fiddle

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

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

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

JS Fiddle

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

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

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

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

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

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

JS Fiddle 的功能很強(qiáng)大，不過(guò)因?yàn)槭菄?guó)外的服務(wù)，有時(shí)候速度會(huì)稍顯遲滯。

.NET Fiddle

顧名思義，.NET Fiddle 就是用來(lái)嘗試和分享 .NET 程序的在線工具了。它非常適合進(jìn)行 .NET 代碼段的臨時(shí)性單元測(cè)試。

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

SQL Fiddle

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

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

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

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

jdoodle

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

RunJS

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

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

CodePen

老實(shí)說(shuō)我從來(lái)沒(méi)用過(guò) CodePen。之所以把它拿出來(lái)，純粹是因?yàn)槲疫@么多年翻譯英文博客的過(guò)程中，CodePen 的出境率太高了?？雌饋?lái)是和 RunJS 非常相似的一個(gè)工具。如果讀者們經(jīng)常在外文網(wǎng)站分享技術(shù)，可以考慮使用這個(gè)工具。

后記

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

• TypeScript 的 Playground

• Babel 的 Try it out

• Kotlin 的 Try online

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

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

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

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

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

彩蛋

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前名稱(chēng)：邊城工具集：Fiddle類(lèi)工具助力在線測(cè)試和協(xié)作代碼-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://bm7419.com/article2/ijgoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、虛擬主機(jī)、微信小程序、響應(yīng)式網(wǎng)站、App設(shè)計(jì)、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)