開發者的10個最佳代碼游樂場
如果你是開發者，在尋找最佳的代碼游樂場，享受代碼的樂趣，那么你來到了正確的地方。在這篇文章中我已經收集了用于測試、調試和分享代碼的10個最 好的免費代碼游樂場（Code Playground）和沙盒工具。如果你知道其他好的代碼游樂場，可以通過評論告訴我。Enjoy！
1. Codepen
CodePen是一個web前后端游樂場。它基于激發、傳授和分享。能高亮熱門示例（“Pen”），且提供高級功能， 如共享和嵌入。需要建立一個減少測試案例來演示并找出一個bug？CodePen絕對適合這個場景。想炫耀你的最新創作和獲得同行的反饋？ CodePen是絕一不二的選擇。
2. CSSDesk
CSSDesk是一個在線CSS沙箱。它使人們能夠快速測試的CSS代碼片段，并觀察實時結果。我有非常看好這個項目。有行號和文本框輸入實時語法高亮顯示。其中一個最好的一點是它允許用戶與他人分享他們的代碼。
谷歌的代碼游樂場是一個基于Web的工具，可以讓Web開發人員嘗試谷歌所有提供的API，調整代碼，和查看結果。谷歌的代碼游樂場可以讓您盡情享受而不必打開一個外部編輯器，所有的API都被裝載在(左側)“Pick an API”框中。
4. JS Bin
JS Bin是一個web app，專門設計于幫助JavaScript和CSS親們在某些上下文中測試和協作調試代碼。 JS Bin允許你編輯和測試JavaScript和HTML。一旦滿意，你可以保存并發送這URL給同行審查或尋求幫助。然后，他們可以做更進一步的修改，如 果需要保存更新。
5. JSFiddle
JSFiddle中是一個shell編輯器，通過創建基于流行JS框架的自定義環境，簡化JavaScript的編寫。 你可以選擇框架和版本（可選的有MooTools，jQuery，ojo, Prototype, YUI, Glow,Vanilla）。此外，如果行的話，你可以添加jQuery UI或MooTools More之類的免費框架。它具有一個極好的特征是能夠產生一個唯一的URL以保存和分享代碼。另外，JSFiddle也自帶嵌入特征。它是無需網站就可嘗 試和分享JS代碼的極佳平臺。
6. Dabblet
Dabblet是快速測試CSS和HTML代碼片段的交互式游樂場。它使用-prefix-free，不必在你的 CSS代碼添加任何前綴。可以在Github gist保存工作內容，將其嵌入到其他網站和與他人分享。它目前只支持Chrome，Safari和Firefox的現代版本。所有發布的代碼屬于發布 者，沒有強制許可證。 Dabblet本身是開源軟件，在NPOSL-3.0許可下發布。
7. Editr
Editr是一個集HTML，CSS和JavaScript的游樂場，你可以在自己的服務器上托管。它是基于ACE的編 輯器。它的超級容易安裝。它支持一個頁面多個實例。可以通過JS對象或HTML屬性進行配置。 Editr支持3種視覺布局：水平，垂直和單一。前兩個是用于在線編輯。第三個是用于演示。 Editr基于MIT License。
8. Livewave
Liveweave是用于HTML5、CSS3、JavaScript的游樂場和用于網頁設計師和開發者實時編輯器。 這是用來測試，練習和分享成果的好工具！面板大小可調，可以讓你隨心所欲寫（或織，如我們稱呼它名字一樣）代碼。 Liveweave還內置了對HTML5和CSS3的標簽/屬性上下文敏感的代碼提示，使生活變得更加簡單。
D3.js設計目的在于讓你能夠以交互方式使用D3.js庫。每一次編輯（產生有效代碼）都會實時影響D3.js游樂場。因為CSS是可視化的重要組成部分，你也可以在線編輯CSS。
10. HTML5 Playground
HTML5的游樂場包括一個可以看HTML5動作的代碼庫。它們包括一些基礎啟動例程，如HTML5 Doctype和音頻標記（仍然是兼容瀏覽器中回放特性的好demo）。擁有一個交互表格，包含HTML5元素，如范圍、日期輸入和針對電子郵件地址和網站的自動驗證。
<nav id="main-nav" class="grid-12 menu-nav"> <div class="menu-sub-menu-container"><ul id="main-nav-menu" class="menu sf-js-enabled"><li id="menu-item-33290" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33290"><a href="/misc/goto?guid=4958326774042942546">首頁</a></li>
</nav>
<div id="breadcrumb" class="grid-12 margin-20"><div class="breadcrumb-wrapper">
伯樂在線 > 首頁 > 所有文章 > Web前端 > 開發者的10個最佳代碼游樂場</div> </div>
<div class="entry-header">
<h1>開發者的10個最佳代碼游樂場</h1>
</div>
<div class="entry-meta">
<p class="entry-meta-hide-on-mobile">2014/07/09 | 分類： <a href="/misc/goto?guid=4958836665720804485" title="查看 Web前端 中的全部文章" rel="category tag">Web前端</a>, <a href="/misc/goto?guid=4958836665830860604" title="查看 工具與資源 中的全部文章" rel="category tag">工具與資源</a>, <a href="/misc/goto?guid=4958836664839372246" title="查看 開發 中的全部文章" rel="category tag">開發</a> | <a href="/misc/goto?guid=4958836665943596408" title="《開發者的10個最佳代碼游樂場》上的評論">0 條評論</a> | 標簽： <a href="/misc/goto?guid=4958836666034187290">工具</a></p>
