前端 - 工具

此文介绍前端开发的几个实用工具。

1.Fiddle
一款神器,可拦截线上网站的JS、CSS以及其他任何请求,做一个重定向到本地文件。
这个工具,之前是在奇物周刊上的一篇博文上看到。
而在上周工作中,同事遇到一个问题,线下代码测试没问题,但代码一放到线上就是BUG。
可能有两个方面的原因:(1)grunt压缩代码造成的问题; (2)线上线下数据不一致导致的BUG。
于是想到这个工具,将线上的JS请求文件(经过压缩难以调试)拦截,重定向为本地JS文件,然后按照函数调用及执行过程定位BUG所在。
请忽略这段:[一个很隐藏的BUG,一个AJAX请求数据,线下prop_id和id是相等的,故用id并无不妥。但是线上的对应数据是在prop_id上,id并不和其一致。]

关于Fiddle的介绍和使用(貌似只支持IE FF亦可):Fiddler - 前端开发值得拥有


2.Stylus
CSS预处理器,当然,还有LESS和Sass,这部分因个人只用过Stylus也就不做比对。其实选定一种也就可以了,个人认为,也很少用到什么乱七八糟的神特性。只是为避免父级选择器的复制粘贴罢了,此外,也就是一些fonts、color的变量保存,说白了也还是减少复制粘贴造成的手疼引发的烦躁心理导致的心情郁闷吃不下饭人越来越萎靡写不动代码工作效率低下工资涨不上去以及引起的一系列连锁反应恶性循环。
如果谈到学习成本,如果只是利用这么点基本功能,那 学习成本 === 0。
而在使用过程中,Stylus也确实存在一点问题,比如一些属性的使用,导致的“断层”,也只好另开一个“父级选择”来解决。
@mark图片待补全。

关于stylus语法:stylus中文版参考文档
集成grunt / grunt watch:Stylus让CSS也能编程
补充一个很傻的问题:’Maximum call stack size exceeded’
类似grunt.registerTask(‘watch’, [‘watch’]); watch调watch造成无限递归。换个快捷名字就好了。


3.Chrome Emulation
移动端调试神器,一测一个准。这也就代表着,只需在Chrome上做好移动端的屏幕断点(CSS3 Media Queries),调整好样式以及测试完JS,移动端的HTML5页面就可以上线了。(不负责任说法,我的移动端还没上线,等上线了再来说话。)

补充:
Chrome Emulation上的调试可以作为80% - 90%的参考,剩余部分还是必须使用手机来调试,毕竟有一些部分,还是挺不一样的。手机端的浏览器计算速率和PC端根本没法比,故此,在移动端监听scroll事件都会造成卡顿现象。此外,还有其他例如唤醒APP,手机摇一摇等等乱七八糟的功能,论Chrome现在再强,那也不能你摇一摇电脑就给你模拟出来。—— 2014.08.24

相应参考: 百度一下,你就知道