在過去的幾年里，在互聯(lián)網(wǎng)上出現(xiàn)了許多為開發(fā)人員提供的在線編程網(wǎng)站（Coding playgrounds）。這不是一件壞事情，畢竟，如果一個編程網(wǎng)站的話，開發(fā)者們遲早會膩的。在這些網(wǎng)站上，你在網(wǎng)頁上編寫代碼，可以實時地看到效 果。你可以編輯所有的東西并預(yù)覽其效果。當(dāng)然，這些網(wǎng)站最適合編寫HTML，CSS和JavaScript代碼了。最贊的地方在于他們大多都是免費的，你 可以很容易地與別人分享你的編程現(xiàn)場，這很適合于團隊工作和創(chuàng)新想法的交流。

如果你深入地想想這種編程模式的話，你就會發(fā)現(xiàn)這種模式對于項目合作很有幫助。而且如果你使用得當(dāng)?shù)脑挘銜斋@很多。如果你在Coding 的時候發(fā)現(xiàn)你遇到問題了，你可以找你的朋友來跟你一起來玩，說不定問題很快就解決了。因此我們想給你推薦10個在線編程網(wǎng)站，去試試這些個工具，然后告訴 我們你的感覺如何，隨時歡迎你的評論！

你或許也對CSS Code Snippets 和Javascript Resources and Tools感興趣。

1、Codepen

這個工具寫前端代碼最合適了，其包括了教學(xué)，分享和設(shè)計靈感的方方面面。這個網(wǎng)站提供了許多實用的功能，比如說分享代碼，嵌入代碼片等。我們建議你邊開發(fā)項目邊使用Codepen來進行測試。

2、JSFiddle

這是一個shell 編輯器，而且因為可以使用JS庫來編寫客戶端界面，所以用JSFiddle編寫JS代碼將會特別舒服。現(xiàn)在你就可以選擇一些JS庫來開始你的代碼之旅。我覺得這或許是***、最***的JS研發(fā)、測試和分享平臺了。

#p#

3、JS Bin

這是為那些想要測試CSS和JavaScript代碼段的開發(fā)者設(shè)計的網(wǎng)站，你還可以去這里調(diào)試代碼。如果對自己的代碼很滿意的話，你可以保存自己的項目并分享給朋友。

4、CSSDeck

這是一個在線的CSS沙盒軟件，你可以快速地測試你的CSS代碼片，并能感受到完成作品所帶來的成就感。這個工具還可以顯示代碼行數(shù)，并且有語法高亮。最贊的特性是可以你可以把代碼分享給任何人，可以是你的朋友或其他的人。

#p#

5、Dabblet

如果你想快速地測試你的HTML和CSS代碼片的話，那么這個工具將是你的不二選擇。該軟件實現(xiàn)了Prefix-free 理念來簡化開發(fā)人員的工作，Prefix-free就是開發(fā)者勿需寫CSS 前綴，由軟件來自動完成。你還可以將你的代碼保存到Github上和朋友或別人來分享你的作品。當(dāng)下該工具只支持Google Chrome，Safari和Firefox，但很明顯你很少用別的瀏覽器對吧？

6、Liveweave

如果你是一個Web設(shè)計人員或開發(fā)人員，那么這個工具會很適合你，該工具支持HTML5和CSS3，當(dāng)然還支持JavaScript。你可以用它來 測試你的作品或工具。遇到問題了你可以和朋友一起來Coding一起來解決問題，寫出了很酷炫的代碼，你也可以炫耀一番。值得一提的是，該工具還有代碼智 能提示哦。

#p#

7、Google‘s Code Playground

當(dāng)所有人都來參與在線編程的時候，我們知道谷歌肯定也會來分一杯羹的。 谷歌Code Playground是一個基于Web的工具，旨在讓開發(fā)者來更方便地使用谷歌提供的API接口。你可以修改代碼然后查看結(jié)果。這個工具可以讓你查看任何 的代碼而無需打開一個外部編輯器。它還為開發(fā)者提供了默認(rèn)的API，你只需要選擇你想用的就可以了。

8、Editr

這是一個相對簡單的工具，你甚至可以在自己的服務(wù)器上搭建該工具。該工具基于ACE編輯器，搭建起來非常簡單，支持水平、垂直和單一三種視圖。前兩 種視圖用于在線編程，后一種用于展示你的作品。該工具遵循MIT License，所以我敢保證用起來絕對很爽。另外，Editr 設(shè)計簡潔美觀，絕對會招你青睞的。

#p#

9、D3 Playground

這個工具是為了更全面地支持D3.js庫而設(shè)計的，所有改變將實時地反映到輸出中。 當(dāng)下CSS的角色已經(jīng)舉足輕重，所以CSS代碼已經(jīng)是Web開發(fā)中不可或缺的 一部分，幸運的是，該工具內(nèi)嵌了CSS編輯環(huán)境，你可以輕松地編寫CSS代碼。

10、HTML5 Playground

這個工具提供了很多代碼和工具庫供開發(fā)者學(xué)習(xí)和使用，當(dāng)然很多是關(guān)于HTML5的有趣的新特性的，比如說是audio標(biāo)簽，互動式form等。當(dāng) 然，還有很多的element，比如說range，date input，甚至還有郵件地址格式的自動檢查。這個工具很有前景，而且肯定能在工作中給你很多幫助。