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

JavaScript08

程序猿专用十大在线编译器(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/

③ 图示

虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却远远不够用. 特别是当产线环境不能随意修改文件情况下,用线上环境来调试本地代码更是迫切的需求. (往往本地测试通过,上线后却是各种bug.) 今天分享一下如何用Fiddler来修改并调试线上的JS代码. 以博客园首页为例子,用我本地的一个js文件来替换它的一个js. 查看首页源码发现一个js,就拿它开刷了. 打开fiddler,捕获博客园的首页请求. 找到“aggsite.js”的请求. 这里有个技巧,可以通过 “select”命令来筛选js请求. 在下面的命令框输入“select script”回车即可. 如下图. 接着把这个请求拖动到“AutoResponder”面板. 拖动之前记得先勾上 “Enable automatic responses”和 “Permit passthrough for unmatched requests”. 然后在Rule Editor的第二下拉框选择 “Find a file”来选择本地的JS文件, 选择后点 Save. 这里我用本地的“test fiddler.js”来替换博客园首页的“aggsite.js”. “test fiddler.js”内容如下. 就是向body追加一段红色文字. $(function(){ var p=$("<p/>").text("这是fiddler加上的JS").css("text-align","center").css("color","red")$("body").prepend(p)}) 好了,刷新博客园首页看看效果. 可以看到,我们替换的js被执行了,接下来就可以在本地使用我们顺手的编辑器来写JS代码了, 本地保存后,刷新网页就能立刻看到效果,就跟在本地开发一样,是不是很方便? 最后想说其实你可以用同样的方式来替换图片,CSS,HTML. 总之一点就是利用线上的环境来测试你的代码,但又不对线上产生影响. 要知道保证不出onlinebug bug是多么的重要,虽然很难做到,但能避免就尽量吧. Enjoy!