程序猿专用十大在线编译器(IDE)整理

JavaScript019

程序猿专用十大在线编译器(IDE)整理,第1张

1. CodeSandbox(基于 React 的在线代码沙盒平台) 我常用的

① 主流的脚手架都支持,比如在线create-react-app,vue-cli等(在线 fork 修改),支持 github 登录(项目导入),也支持 cli 上传例子,例子可以在线访问和下载,当然也支持内嵌到其他博客等网页中。

② 地址：https://codesandbox.io/

③ 图示

2. CodePen(前端代码编辑运行的网站)

① CodePen 是一个完全免费的前端代码托管服务，主要功能有：

② 地址：https://codepen.io/

③ 图示

3. JSRUN(支持手机端的在线JS编辑器)

① jsrun是一款支持手机端的在线JS编辑器, HTML/CSS/Javascript在线代码运行工具,js代码在线测试调试,是runjs的升级版支持vue.js/angular.js的在线编辑器

② 地址：http://jsrun.net/

③ 图示

4. jsFiddle(前端代码编辑运行的网站)

① jsFiddle 是一个Web开发人员的练习场,可在线编辑和测试 HTML、CSS、JavaScript代码片段。在 jsFiddle 编辑的代码,可以保存,也可分享给其他人,还可嵌入到其他网页

② 地址：https://jsfiddle.net/

③ 图示

5. Ideone(C和C++的在线编译和调试工具,支持其他的60种语言) 我常用

① Ideone是C和C++的在线编译和调试工具,支持其他的60种语言。这个工具提供许多强大的功能,允许程序员快速高效的编译源代码

② 地址：https://www.ideone.com/

③ 图示

6. Codechef(C，C ++和Java的在线编译工具)

① 它支持C，C ++和Java，非常接近真正的桌面IDE。这是超快速和易于使用。适合于课堂和作业的学生，练习面试问题。

② 地址：https://www.codechef.com/ide

③ 图示

7. JDoodle (C，C ++和Java的在线IDE)

① 支持协作代码。它只是从一个简单的文本区域开始，您可以粘贴代码，然后单击运行。您可以更改命令行参数并在运行该程序之前设置stdin。最适合新的在线编辑器不支持的许多旧语言。

② 地址：https://www.codechef.com/ide

③ 图示

8. OnlineGDB (在线C，C ++，Java，PHP编译器) 我常用

① 它支持C，C ++，PHP和Java编译器。OnlineGDB的独特功能是，您可以逐步调试您的代码。一旦代码被写入，它可以很容易地格式化，使其看起来不错。

② 地址：https://www.onlinegdb.com/

③ 图示

9. GCC资源管理器

① GCC编译器资源管理器是一个交互式在线编译器，它显示编译后的C++、RISE、GO（以及更多）代码的汇编输出。

② 地址：https://gcc.godbolt.org/

③ 图示

10. plnkr edit在线编辑器

① js的在线编辑器。

② 地址：http://plnkr.co/edit/

③ 图示

生成聊天窗口具体执行步骤如下：

1、借助聊天软件生成js代码

快商通是一款免费的在线客服系统，能够生成为网页实现自动弹出在线聊天窗口功能的js代码。搜索快商通到达官网下载客服系统软件并完成注册，登录后找到“设置中心”-“代码生成”打开进入代码生成页面，可以直接拿到我们需要的js代码(如果是移动网站，记得先点击页面上的移动设备图标选项)。

客服软件后台

生成在线聊天窗口js代码

2、将js代码添加到网页html源码中

拿到代码就已经成功一半了，紧接着打开网站后台，找到名为“footer”的模板文件，打开文件把上一步获取到的代码添加到第一行或最后一行，再点击保存就可以了。当再访问网页时，就会发现页面出现了迷你对话窗口，接下来我们要让他能够根据要求自动弹出。

3、设置自动弹出在线聊天窗口的触发条件

在左侧找到“图标设置”功能栏，点击进入设置页面。打开“迷你对话框”的功能按钮，并直接点击“迷你对话框”文字进入设置界面。

jsfiddle

Create a new fiddle

最经典的的编辑器了，主要写页面，没有集成console不太方面调JS

jsbin

JS Bin

跟jsfiddle差不多，有自带console挺适合调JS的，我最近几篇专栏文章的代码都是放在jsbin里的，可以方便的到处到gist很不错。但是存snapshot有点不清楚（反正我是还没弄清楚）。Node快闪 御用。

plunker

https://plnkr.co/

这个好像国内用的人不多，难道是被墙了？这是我见过的最贴近真实开发环境的ide，所有html js css文件一览无遗，不像jsfiddle一样隐藏html和body元素。要是有console就更好了。Angular1文档御用。

repl.it

Online REPL, Compiler &IDE

这个大家可能见的不多，多语言环境，JS的是纯console环境，布局很干净，调JS挺好的。

codepen

CodePen

这个跟jsbin差不多，好像上面的代码大多数是CSS相关的。http://css-tricks.com御用。

hackerrank

HackerRank

这个严格说是个比赛／面试环境，实时性不错，其它跟jsfiddle大同小异。我司电面御用。

runkit

RunKit is Node prototyping

这个是node编程用的，在线require( )各种包，看上去挺屌的，我还没怎么玩过。npm御用。