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