盘点在线代码编辑测试网站(在线编写代码网站)

yumo66611小时前技术文章2

对于一些前端的样式和js效果,我们非常希望可以将这些代码片段保存起来,然后分享给那些想要使用这些样式特效的人,庆幸的是,网络上已经有很多这样的网站了,今天我们就来盘点一下这些非常好用的网站。

jsfiddle

诞生比较早的一个代码片段网站,它集成了主流的js框架,你可以轻松地在需要使用的时候引入它们,同时它也支持引入外部css链接,通过将html,css,js代码片段分离,让用户有了非常清楚的代码结构,非常方便代码地调试。

它支持登录功能,登录以后,你可以将自己的代码片段进行保存和分享。

JSRUN

一个支持多种编程语言的代码运行网站,你可以保存自己的代码,你可以运行各个常用的编程语言代码,缺点是有时候需要输入验证码,有些功能需要升级vip才能使用。

codepen

和jsfiddle很类似,也是专业的网页编辑器,可以引入js,css,对于html,js,css分为三个窗口进行管理,登录之后可以保存代码片段和分享代码片段。即使不登录,也可以使用它进行临时的代码编辑和测试。

jsbin

也是一款在线代码编辑网站,也是可以编辑html和css,js代码片段,可以引入第三方库,可以引入第三方css,可以查看控制台的输出。

它可以保存截图,可以生成模板,同样也支持代码打包下载。

cssdeck

它提供了很多优秀的代码案例,如果你没有思路或者仅仅只是想欣赏下他人的优秀代码,你可以来这里找到你想要的,类似于jsfiddle,它也是支持html,js,css代码编辑的,它的展示页面看起来很大,非常方便查看。

它的html支持markdown和slime进行处理,它的js支持coffeescript,它的css支持sass,scss,less等。

dabblet

它主要支持的是css代码块的测试,它目前不支持js,它的代码编辑块字体可以非常方便地进行调整。

总结

网上有很多类似的代码编辑网站,如果你感兴趣的话,你也可以去github上查看Plunker等项目开源代码进行分析研究,自行搭建属于自己的代码片段编辑网站。

相关文章

把CSS代码“减肥”30%后,灯具独立站加载速度快了2秒

”上个月,帮佛山李总做跨境灯具站时,技术顾问的话让他直挠头——网站刚上线,流量还没起来,就被“速度”卡了脖子。我打开Chrome开发者工具,吓了一跳:一个详情页的CSS文件有1.2MB,JS文件800...

源自codepen的25个最受欢迎的HTML/CSS 代码

Codepen是一个非常了不起的网页应用。只要电脑能够上网,你就可以创建HTML, CSS和Javascript。如果你想选择性加入PRO版本,你会得到一些非常酷的效果诸如:世界范围内的成对编程(在线...

从网站检查中复制CSS代码的最简单方法

在处理网站项目时,您是否曾经对使用开发工具感到沮丧?必须在您正在处理的网页和检查器之间来回切换以查看CSS并进行调整通常可能是一个挑战。值得庆幸的是,有一个浏览器扩展程序可以简化该过程:CSS Sca...

可以看得见的代码运行:编程教学网站

可视化的查看代码运行原理的网站以下是几个常见的可视化查看代码运行原理的网站:Python Tutor(http://www.pythontutor.com):Python Tutor 是一个在线的代码...

短网址见多了,来看看这个长长长长长网址

短网址的由来说起短网址的由来,不得不提到一个平台,那就是微博。微博早期时候,每条微博最多只能写 140 个字,这就导致如果你想在一条微博中写一条网址,那么网址就会占用一大半的内容。于是人们就想,能不能...