點擊右上方紅色按鈕關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

大家應該都遇到過這麼一個場景：我們需要敲一個demo出來，但是直接敲在項目裡面的話，又不想commit進歷史，也覺得store起來不算很方便，就想獨立出來，一個單獨的demo，可以敲完直接看效果。

然而，出於速度和效率等考慮，對於需要寫一個獨立demo來看效果的程序員來說，一個非常好的選擇就是使用網上提供的在線web編輯器，今天，我就給大家推薦兩款比較常用的在線代碼編輯器。

一、codesandbox

這款在線代碼編輯器比較流行，一些前端主流的框架代碼幾乎都有，可以滿足你80%的需求。

地址：https://codesandbox.io/

網站首頁效果處理的很棒，可以讓你眼前一亮：

我們可以快速去寫好一個demo看效果，目前提供了下面這些框架的支持。

假如你點擊React，就會快速出來一個編輯界面。最終demo還可以輸出到github上去。接下來怎麼玩，可以進去搞個demo試試。

二、codeopen

在發現codesandbox之前，我經常用這款在線編輯代碼。

地址：https://codepen.io/

這款編輯器用久了就會發現一些不太好的地方。比如，隨便打開一個pen，是一片空白，如果我只想快速打外demo，我還需要從頭開始寫。

pens可以建多個，但是project就只能建一個，如果要多個，就需要升級到pro版本。

codepen的實時預覽也蠻坑的，敲代碼改動的過程中，就會報錯。而且報錯的定位，卻不好，根據錯誤看了半天，不知道自己的BUG發生在什麼地方。

總結：

在線代碼編輯器還一些其它的，但相對來說不是很好用的我不推薦，大家也可以了解一下。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！