18款線上程式碼片段測試工具

　　本文作者Steve Smith是網站DesignDrizzle的創始人，他是一位工作超過7年的專業網站設計者。在這篇文章裡展示了一些比較有價值、用起來非常方便的程式碼片段檢測工具。這些工具將大大的提升開發者在程式碼片段檢測方面的工作效率，亦可確保他們的程式碼執行起來萬無一失。許多開發者都使用線上程式碼片段檢測工具，這些工具當中有些是允許開發者和別人一起編輯/分享相互之間的程式碼，分享的目的主要是共同分析程式碼並相互協助完成程式碼片段的檢查。

　　下面的這18個工具可以幫助開發者用來檢查不論是即興創作的程式碼還是用於大型工程的程式碼，同時還可以讓開發者自主修改程式碼，以便更好的理解程式碼的功能性。

　　1. CodePen

　　CodePen只是一個Web前端的執行場地，具備機動、訓練和分享等多種功能。同時，CodePen還可以讓使用者構建一個壓縮版本的測試案例來證明並解決編碼當中的錯誤。

　　2. Dabblet

　　Dabblet的介面十分簡潔，操作起來並不複雜，特別適合新手和想嘗試最新HTML5標籤和CSS3樣式的前端工程師使用。Dabblet的一大特色是程式碼編寫時可免加CSS字首。因為，Dabblet的創造者Lea Verou本人就是免CSS字首JavaScript指令碼prefix-free的創造者，Dabblet擁有此功能也就是順理成章的事。HTML和CSS程式碼間的切換也很方便，點選隱藏工具欄右上方的標籤即可。使用者可以根據自己的習慣，調整前端程式碼的預覽效果，瀏覽器內全屏預覽將在新標籤頁中開啟。

　　Dabblet支援用Github帳號登入，測試的程式碼片段既可以匿名儲存也可以儲存在使用者的Github：gist中，以便使用者將程式碼段嵌入自己的網站或是進一步分享給其他人。

　　3. Ideone

　　線上多語言程式設計執行器工具，支援包括C++，Java，JavaScript，Perl，PHP，Python和Ruby在內的40多種程式語言，能線上直接做編譯和執行動作，該工具是一款簡易的程式設計測試工具，雖然不能替代專業版的工具，但是其功能非常全面。

　　4. jsfiddle

　　jsfiddle是一個線上的shell編輯器，通過JavaScript框架建立自定義的環境，以簡化JavaScript程式碼。還可以用於測試示例程式碼。不僅如此，你還可以新增一個Ajax echo後端，並且通過一系列的JavaScript框架自動載入資源，如MooTools，jQuery，Dojo，Prototype，YUI，Glow和Vanilla等等。

　　還有一個重要特性就是能夠儲存和分享一個unique URL生成程式碼，jsfiddle還有一個嵌入的功能。它提供了一個由4個部分組成的介面：

• HTML 編輯器
• CSS 編輯器
• JavaScript 編輯器
• 輸出介面

　　5. Codepad

　　Codepad是一款簡單的線上IDE編譯器，適用於團隊協作工作，幫助程式碼生成一個簡短的URL，這樣就能通過聊天或者電子訊息與人分享。

　　操作起來也很方便：只需要把程式碼貼上進去就可以編譯執行了，連工程也不需要新建，而且Codepad支援的語言有9種，包括C，C++，D，Haskell，Lua，OCaml，PHP，Perl，Plain Text，Python，Ruby，Scheme，Tcl。

　　6. Liveweave

　　LiveWeave對於Web設計者和開發者來說都是一個極好的線上工具，它提供了6個Tab功能或特徵，可以瀏覽、編輯、分隔、JavaScript庫和Tidy、CSS3、HTML5等線上編輯。

　　7. Google Code Playground

　　有了這款線上工具，Web開發者就可以快速檢查和執行程式碼，也就沒必要非得開啟一個外在校正器。

　　8. Pastebin.me

　　這是一款不可多得好工具，開發者可以理所應當的重新調整基於瀏覽器視角的程式碼窗格大小，這一功能對於寬屏顯示器使用者來說是相當有吸引力的。

　　9. CSSDesk

　　CSSDesk允許使用者快速敏捷的檢查程式碼片段，還能讓整個效果看起來活靈活現。左側兩個皮膚，可以分別輸入HTML和CSS程式碼，但不支援JavaScript除錯。你可以改變“預覽區”的背景顏色，可以儲存或下載除錯完成的程式碼。

　　10. jsbin v.2

　　通過這款Web App，開發者就能對程式碼片段進行測試，並改善它的功能性。同時還能向別人分享URL。它分成JavaScript、HTML、CSS、控制皮膚和輸出這5個區域，你可以自行勾選顯示哪些區域。

　　11. Tinkerbin

　　和jsfiddle比較起來，Tinkerbin介面功能比較簡答，但是介面佈局更加合理。使用jsfiddle的時候，總感覺每一個視窗的輸入都比較費勁，使用者不得不來回的拖拉視窗。而使用Tinkerbin，你可以更加容易的切換多個視窗或者單獨一個視窗編輯CSS，HTML，或者JS程式碼，根本不需要生成檔案或者上傳到伺服器上。Tinkerbin同時也支援Coffeescript，Sass（with Compass），Less，HAML等類庫。

　　12. Try Editor v.1.5

　　這是一款比較適中的、使用起來毫無壓力的程式碼片段檢查工具，只要將程式碼片段貼上到Try Editor裡面，從感覺上就能知道效果如何。

　　13. Snippet.io

　　它是一個沒有多少限制條件的工具，可以毫不費力跟別人一起分享程式碼片段。

　　14. HTMLEdit Square

　　HTMLEdit Square是一款實時的後臺操作工具，用於便捷的檢查HTML程式碼。

　　15. Rendur

　　Rendur是一個輕量級的線上除錯交流工具，功能不多，但是載入和執行都很快。使用者可以在HTML、CSS、Javascript三個皮膚中切換，輸入相應程式碼。程式碼的執行結果，會自動顯示在背景網頁上。最後一個皮膚，顯示的是整個網頁的原始碼。

　　16. Tinker

　　使用Tinker工具編寫和分享程式碼都是相當方便的，速度不是一般的快啊！

　　17. Practicode

　　在這裡，可以編寫程式碼片段；另外，也可以提取HTML、CSS和VBScript程式碼。

　　18. jsdo.it

　　在這個網站裡，可以將程式碼內接到Web瀏覽器裡，也可以和別人一起分享程式碼片段。

　　原文：DesignDrizzle