常用在线前端工具

最新推荐文章于 2024-02-26 23:47:58 发布

BorisHuai

最新推荐文章于 2024-02-26 23:47:58 发布

阅读量2.8k

点赞数 3

分类专栏：前端学习资源前端开发工具文章标签：前端

本文链接：https://blog.csdn.net/borishuai/article/details/44494555

版权

前端开发工具同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端学习资源

2 篇文章 0 订阅

订阅专栏

收集了一些比较实用的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在中国的市场份额已经很低了，可以不用支持了，这是有数据有根据的了。需要说明的百度的数据主要基于国内的数据。