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

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

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

1、Codepen

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

2、JSFiddle

這是一個(gè)shell 編輯器，而且因?yàn)榭梢允褂肑S庫(kù)來(lái)編寫(xiě)客戶(hù)端界面，所以用JSFiddle編寫(xiě)JS代碼將會(huì)特別舒服。現(xiàn)在你就可以選擇一些JS庫(kù)來(lái)開(kāi)始你的代碼之旅。我覺(jué)得這或許是***、最***的JS研發(fā)、測(cè)試和分享平臺(tái)了。

#p#

3、JS Bin

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

4、CSSDeck

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

#p#

5、Dabblet

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

6、Liveweave

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

#p#

7、Google‘s Code Playground

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

8、Editr

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

#p#

9、D3 Playground

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

10、HTML5 Playground

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