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、CSS三、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瀏覽器裏，也能夠和別人一塊兒分享代碼片斷。