1. CodeSandbox(基于 React 的在線代碼沙盒平臺) 我常用的
① 主流的腳手架都支持,比如在線create-react-app,vue-cli等(在線 fork 修改),支持 github 登錄(項目導入),也支持 cli 上傳例子,例子可以在線訪問和下載,當然也支持內嵌到其他博客等網頁中。
② 地址：https://codesandbox.io/
③ 圖示
支持的腳手架 （圖 1-1）
編輯界面 （圖 1-2）
2. CodePen(前端代碼編輯運行的網站)
① CodePen 是一個完全免費的前端代碼托管服務，主要功能有：
- 即時預覽。你甚至可以本地修改并即時預覽別人的作品。支持多種主流預處理器
- 快速添加外部資源文件。只需在輸入框里輸入庫名， CodePen 就會從 cdnjs 上尋找匹配的 css 或 js 庫。
- 免費創建模板。支持創建三個模板，不是每個作品都需要從白板開始。
- 優秀的外嵌體驗。在 WordPress 或 Reddit 等支持 oEmbed 的平臺上，只要簡單地把鏈接貼入編輯框，
- 發布后會自動轉為嵌入作品。
② 地址：https://codepen.io/
③ 圖示
編輯界面 （圖 2-1和 圖 2-2）
3. JSRUN(支持手機端的在線JS編輯器)
① jsrun是一款支持手機端的在線JS編輯器, HTML/CSS/Javascript在線代碼運行工具,js代碼在線測試調試,是runjs的升級版支持vue.js/angular.js的在線編輯器
② 地址：http://jsrun.net/
③ 圖示
編輯界面 （圖 3-1和 圖 3-2）
4. jsFiddle(前端代碼編輯運行的網站)
① jsFiddle 是一個Web開發人員的練習場,可在線編輯和測試 HTML、CSS、JavaScript代碼片段。在 jsFiddle 編輯的代碼,可以保存,也可分享給其他人,還可嵌入到其他網頁
② 地址：https://jsfiddle.net/
③ 圖示
編輯界面 （圖 4-1）
5. Ideone(C和C++的在線編譯和調試工具,支持其他的60種語言) 我常用
① Ideone是C和C++的在線編譯和調試工具,支持其他的60種語言。這個工具提供許多強大的功能,允許程序員快速高效的編譯源代碼
② 地址：https://www.ideone.com/
③ 圖示
編輯界面 （圖 5-1 和 圖 5-2）
6. Codechef(C，C ++和Java的在線編譯工具)
① 它支持C，C ++和Java，非常接近真正的桌面IDE。這是超快速和易于使用。適合于課堂和作業的學生，練習面試問題。
② 地址：https://www.codechef.com/ide
③ 圖示
編輯界面 （圖 6-1）
7. JDoodle (C，C ++和Java的在線IDE)
① 支持協作代碼。它只是從一個簡單的文本區域開始，您可以粘貼代碼，然后單擊運行。您可以更改命令行參數并在運行該程序之前設置stdin。最適合新的在線編輯器不支持的許多舊語言。
② 地址：https://www.codechef.com/ide
③ 圖示
編輯界面 （圖 7-1 和 圖 7-2）
8. OnlineGDB (在線C，C ++，Java，PHP編譯器) 我常用
① 它支持C，C ++，PHP和Java編譯器。OnlineGDB的獨特功能是，您可以逐步調試您的代碼。一旦代碼被寫入，它可以很容易地格式化，使其看起來不錯。
② 地址：https://www.onlinegdb.com/
③ 圖示
編輯界面 （圖 8-1）
9. GCC資源管理器
① GCC編譯器資源管理器是一個交互式在線編譯器，它顯示編譯后的C++、RISE、GO（以及更多）代碼的匯編輸出。
② 地址：https://gcc.godbolt.org/
③ 圖示
編輯界面 （圖 9-1）
10. plnkr edit在線編輯器
① js的在線編輯器。
② 地址：http://plnkr.co/edit/
③ 圖示
編輯界面 （圖 10-1）
