常用在线前端工具

收集了一些比较实用的Web在线工具,可以极大的方便我们前端开发,欢迎大家补充。本文放在Github上面了,欢迎Fork

Online JavaScript Beautifier

可以对JavaScript代码进行格式化,以方便阅读,当阅读别人格式比较乱的代码时尤其有用。

JSONLint

可以对JSON进行格式化,同时可以发现JSON中的语法错误,当调试内容较长的JSON时非常有用。我在开发时系统经常提示JSON语法错误,但是却找不出来,比如数组最后一个元素多了一个逗号,结果用JSONLint一就搞定了。

PlaceHolder

用来生成占位图片,比如开发时需要一张300x300的图片,但是美工还没有做图,所以我们可以用一张占位图进行开发调试,等图片做好替换即可,用法将图片尺寸跟在URL后面即可,如http://placehold.it/300x300即可生成一300x300的图片。

Regex Tester

在线正则表达式测试工具,可以方便的测试我们的正则是否正确,进行在线调试。

Viewport Sizes

可以查询所有主流移动设备的CSS像素,CSS像不是物理像素,比如iPhone6的物理像素是1334x750,而它的CSS像素是667x375。CSS像素主要是指移动浏览上的分辨率,所以在调试移动Web时就非常需要查各个移动设备的CSS像素。

Can I Use

“Can I Use”主要提供了前端相关技术的兼容性查询,包括桌面浏览器和移动浏览器。比如如果输入CSS3 的“border-radius”,它就会列出所有的浏览器对该属性的支持情况,有助于我们判断是否可以使用各种CSS和JS的新的特性。

阿里测

可以在线测试网站的性能,主要包括前端性能的方方面面,这个比YSlow或Chrome自带的audit更全名详细。当然阿里测也是基于WebPagetest搭建的,大家也可以看看。

百度统计流量研究院

这是百度基于百度统计所覆盖的超过150万的站点的数据产生的报告数据,对于前端开发来说比较有用的数据主要包括:浏览器市场份额,分辨率使用情况,移动设备品牌占比,移动设备市场份额。这些数据有助于我们如何做浏览器兼容性测试,如何根据不同的分辨率做响应式开发等。比如IE6和IE7在中国的市场份额已经很低了,可以不用支持了,这是有数据有根据的了。需要说明的百度的数据主要基于国内的数据。

JSFiddle

可以在线运行调试前端代码,可以很方便的导入各种主流的前端框架,甚至可以模拟AJAX请求,导入Github代码等,非常适合在线学/调试代码,也比较适合案例分享,例如把它作为博客的例子进行分享。注册用户可以保存自己的代码。 类似的工具还有很多,它们各有优缺点,自己体:

jsPerf: JavaScript performance playground

这是一个标准的JS代码性能测试平台,比如如果觉得forEach比for循环快的话,可以在上面创建测试代码进行测试。它上面也有好多其它用户创建的基准测试代码。它比我们在自己的电脑上测试要准确得多,因为本地测试外部干扰因素较多。

HTML编码/解码

除了HTM编码/解码,还有URL编码/解码,还有字符串大小写处理,哈希函数处理,比如你想要将一个字符串进行MD5编码就很方便。

时间: 2024-10-29 01:16:56

常用在线前端工具的相关文章

常用在线小工具

JavaScript代码格式化工具 JSON代码工具 JavaScript压缩/格式化/加密工具 CSS代码工具 JavaScript正则在线测试工具 在线JS脚本校验器错误 Unix时间戳(timestamp)转换工具 在线XML/JSON互相转换工具 JavaScript代码在线加密工具 在线XML格式化/压缩工具

常用的前端开发插件与工具合集

常用的前端开发插件与工具合集 Font Awesome字体图标插件 Font Awesome的矢量图标,将使您的网站在视网膜级的高分屏上大放异彩. 完美兼容其它框架 尽管是为Bootstrap设计,但Font Awesome同样能与其它框架完美协同运作. Font Awesome https://fontawesome.com/ SweetAlert系列(数据Ajax)插件 SweetAlert 是 JavaScript 原生 'alert' 弹窗的完美替代品... SweetAlert 让弹窗

前端常用插件、工具类库汇总(下)

前言 对本文感兴趣可以先加个收藏,也可以转发分享给身边的小伙伴,以后遇到类似的场景就来看看具体的插件及其用法. 上一篇<前端常用插件.工具类库汇总(上)>内容摘要: " 动画库 滚动库 轮播图 滚屏 弹出框 消息通知 下拉框 级联选择器 颜色选择器 时间日期处理 表单验证 分页插件 " >>前端常用插件.工具类库汇总(上) 本篇延续上一篇的内容继续给大家带来一系列关于前端插件.工具类的内容. 富文本编辑器 wangEditor http://www.wanged

转-推荐的几个开发常用在线工具,可以提升开发效率(持续更新)

http://blog.csdn.net/kroclin/article/details/40634975 相信开发中每个人手头上面都有那么几个工具可以让你每天洋洋得意的开发软件,而这里我就将我觉得还挺不错的几款在线工具分享出来,仁者见仁啦,喜欢就拿走.还会持续更新,以后有新的我都贴上来. 1.MD5解密:http://www.cmd5.com/ 2.MD5加密:http://md5jiami.51240.com/ 3.json在线解析工具:http://json.parser.online.f

大公司或专业团队目前流行的前端工具有什么?

寸志,前端工程师 黄保长.王楠.Bear Little 等人赞同 下面这些东西在大公司可能不流行(你懂的,大公司喜欢自己造轮子),但绝对是专业前端需要了解的: Node.js:现代工业化前端的基础: RequireJS:AMD规范,即将过时的 JavaScript 模块化方案: Bower:前端模块源: npm:前端工具源,另一个潜在的前端模块源: Browserify:即将过时的基于 CommonJS 的前端模块化方案: Less:等 CSS 增强工具: Gulp:前端构建工具,如果你在前端开

优秀的前端工具

2014年08月09日更新 CLIP PATH (MASK) GENERATOR CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. 2014年01月20日更新 CSS Animatie CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码. 2013年09月03日更新 CREATE CSS3 CREATE CSS3是一款在线集成众多CSS3功能的生成

常用VPS测试工具整理

购买VPS前主要是使用一些网络测试工具如ping.tracert.WinMTR之类的工具进行测试,确定VPS所走线路的好坏,购买后主要测试VPS的性能.下面主要介绍一下常用的工具: 一.网络测试工具 1.ping测试工具 http://www.17ce.com/ 主要用来测试国内各地市.香港.台湾.少量国外的ping值.路由跟踪. http://www.webkaka.com/Ping.aspx 主要用来测试国内各地市的ping值,也有香港.美国.日本的ping服务器节点. http://clo

一款免费好用的代码在线比较工具

在线代码对比工具(码工具)是一款免费的在线文本对比工具,无需注册,可以在线对两段文本进行对比,检测/比较两个文本有什么不同的差异,以便修改,常用于程序代码.使用这个在线工具的好处就是不需要人工查看,尤其是大文件,有几百上千行的代码,这时候就建议使用比较工具了,不用浪费过多时间去寻找.该工具支持utf-8, gbk,gb2312等不同格式的文本,可以在线对比html, php, css, asp, js等代码,这对于程序员来说是非常方便! 比起同类软件Beyond compare.DiffMerg

linux程序包管理之rpm程序包管理器与yum前端工具

这里主要讲以CentOS为例,rpm程序包管理器的相关内容: CentOS的程序包管理器:   1) 程序包的命名规则:        源代码包:            software_name-VERSION.tar.gz            VERSION:major.minor.release                major:主版本号,通常代表重大功能改进的版本分支:                minor:次版本号,通常代表在某个版本的分支中的某个功能发生变化: