如果你是開發(fā)者，在尋找最佳的代碼游樂(lè)場(chǎng)，享受代碼的樂(lè)趣，那么你來(lái)到了正確的地方。在這篇文章中我已經(jīng)收集了用于測(cè)試、調(diào)試和分享代碼的10個(gè)最好的免費(fèi)代碼游樂(lè)場(chǎng)（Code Playground）和沙盒工具。如果你知道其他好的代碼游樂(lè)場(chǎng)，可以通過(guò)評(píng)論告訴我。Enjoy！

1. Codepen

CodePen是一個(gè)web前后端游樂(lè)場(chǎng)。它基于激發(fā)、傳授和分享。能高亮熱門示例（“Pen”），且提供高級(jí)功能，如共享和嵌入。需要建立一個(gè)減少測(cè)試案例來(lái)演示并找出一個(gè)bug？CodePen絕對(duì)適合這個(gè)場(chǎng)景。想炫耀你的最新創(chuàng)作和獲得同行的反饋？ CodePen是絕一不二的選擇。

2. CSSDesk

CSSDesk是一個(gè)在線CSS沙箱。它使人們能夠快速測(cè)試的CSS代碼片段，并觀察實(shí)時(shí)結(jié)果。我有非�？春眠@個(gè)項(xiàng)目。有行號(hào)和文本框輸入實(shí)時(shí)語(yǔ)法高亮顯示。其中一個(gè)最好的一點(diǎn)是它允許用戶與他人分享他們的代碼。

3. Google’s Code Playground

谷歌的代碼游樂(lè)場(chǎng)是一個(gè)基于Web的工具，可以讓W(xué)eb開發(fā)人員嘗試谷歌所有提供的API，調(diào)整代碼，和查看結(jié)果。谷歌的代碼游樂(lè)場(chǎng)可以讓您盡情享受而不必打開一個(gè)外部編輯器，所有的API都被裝載在(左側(cè))“Pick an API”框中。

4. JS Bin

JS Bin是一個(gè)web app，專門設(shè)計(jì)于幫助JavaScript和CSS親們?cè)谀承┥舷挛闹袦y(cè)試和協(xié)作調(diào)試代碼。 JS Bin允許你編輯和測(cè)試JavaScript和HTML。一旦滿意，你可以保存并發(fā)送這URL給同行審查或?qū)で髱椭�。然后，他們可以做更進(jìn)一步的修改，如果需要保存更新。

5. JSFiddle

JSFiddle中是一個(gè)shell編輯器，通過(guò)創(chuàng)建基于流行JS框架的自定義環(huán)境，簡(jiǎn)化JavaScript的編寫。你可以選擇框架和版本（可選的有MooTools，jQuery，ojo, Prototype, YUI, Glow,Vanilla）。此外，如果行的話，你可以添加jQuery UI或MooTools More之類的免費(fèi)框架。它具有一個(gè)極好的特征是能夠產(chǎn)生一個(gè)唯一的URL以保存和分享代碼。另外，JSFiddle也自帶嵌入特征。它是無(wú)需網(wǎng)站就可嘗試和分享JS代碼的極佳平臺(tái)。

6. Dabblet

Dabblet是快速測(cè)試CSS和HTML代碼片段的交互式游樂(lè)場(chǎng)。它使用-prefix-free，不必在你的CSS代碼添加任何前綴�？梢栽贕ithub gist保存工作內(nèi)容，將其嵌入到其他網(wǎng)站和與他人分享。它目前只支持Chrome，Safari和Firefox的現(xiàn)代版本。所有發(fā)布的代碼屬于發(fā)布者，沒(méi)有強(qiáng)制許可證。 Dabblet本身是開源軟件，在NPOSL-3.0許可下發(fā)布。

7. Editr

Editr是一個(gè)集HTML，CSS和JavaScript的游樂(lè)場(chǎng)，你可以在自己的服務(wù)器上托管。它是基于ACE的編輯器。它的超級(jí)容易安裝。它支持一個(gè)頁(yè)面多個(gè)實(shí)例�？梢酝ㄟ^(guò)JS對(duì)象或HTML屬性進(jìn)行配置。 Editr支持3種視覺(jué)布局：水平，垂直和單一。前兩個(gè)是用于在線編輯。第三個(gè)是用于演示。 Editr基于MIT License。

8. Livewave

Liveweave是用于HTML5、CSS3、JavaScript的游樂(lè)場(chǎng)和用于網(wǎng)頁(yè)設(shè)計(jì)師和開發(fā)者實(shí)時(shí)編輯器。這是用來(lái)測(cè)試，練習(xí)和分享成果的好工具！面板大小可調(diào)，可以讓你隨心所欲寫（或織，如我們稱呼它名字一樣）代碼。 Liveweave還內(nèi)置了對(duì)HTML5和CSS3的標(biāo)簽/屬性上下文敏感的代碼提示，使生活變得更加簡(jiǎn)單。

9. D3 Playground

D3.js設(shè)計(jì)目的在于讓你能夠以交互方式使用D3.js庫(kù)。每一次編輯（產(chǎn)生有效代碼）都會(huì)實(shí)時(shí)影響D3.js游樂(lè)場(chǎng)。因?yàn)镃SS是可視化的重要組成部分，你也可以在線編輯CSS。

10. HTML5 Playground

HTML5的游樂(lè)場(chǎng)包括一個(gè)可以看HTML5動(dòng)作的代碼庫(kù)。它們包括一些基礎(chǔ)啟動(dòng)例程，如HTML5 Doctype和音頻標(biāo)記（仍然是兼容瀏覽器中回放特性的好demo）。擁有一個(gè)交互表格，包含HTML5元素，如范圍、日期輸入和針對(duì)電子郵件地址和網(wǎng)站的自動(dòng)驗(yàn)證。

本文由伯樂(lè)在線-孤舟8027翻譯自 codegeekz 。

標(biāo)簽： Google https isp ssd 代碼 電子郵件 服務(wù)器 谷歌 開發(fā)者 網(wǎng)站 選擇 用戶

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。