CUED-迅雷用户体验设计中心

浅尝各种前端利器

Allan | 2011-06-16 | 网页重构

浅尝各种前端利器

    趁着博客上线的东风,赶紧把原来团队内分享的一个小题目拿出来写一写。虽然做为高手的你,认为这一锅不是神马无敌大餐,但是本着存在即合理(又瞎套名言了-.-)、让BO客更健壮、让各位看官更快乐地原则,我觉得还是有必要发射出来。

    OK,客套完毕,下面正式开始我地“肤浅”,谢谢。

 

 

Editplus

这货不是VIM,这货是EP

    看着白色的编辑器有视觉疲劳了吗?赶紧用EP啊!简单轻便而且拥有VIM的丰姿啊!

    虽然EP和奥多比一样都要保护费,但是买一个正版的奥多比就可以让公司所有的码工们都用上全新正品的EP!太爽了有木有! 当然EP爽的不仅是长的好看且经济,他还有十分华丽的自动完成和快捷键.

    例如可以在html.acp中设置

    #T=s

    A!wo hen shuang a !wo hen shuang a !

    那么当敲一个S后再敲一个空格,简单两个字母以后就可以华丽的出现“A!wo hen shuang a !wo hen shuang a !”恩,太爽了。

    各种牛B快捷键请大家google一下。谢谢。

    EP虽然不再是页面码工们的装*利器,但是亲是不是需要增加一下效率呢?

 

FireBug – 高效率,亲也可以拥有

 

    自从firebug出现以后,前端界终于告别了石器时代。如果不知道firebug那真的不好意思说是一个前端码工。就像爱好看片的人不知道迅雷可以高速下片一样

    只所以如此赞美firebug主要是因为他可以实时调试html和css。还有各种调试JS十分无敌的功能。在此先浅浅的介绍一些调试HTML和css地功能。 安装完成后,Fx下面会出现一个虫的logo (firebug,是用火烧死虫的意思,还是说调试firefox bug 的意思呢?) 未激活图标 激活图片 。各位可以直接点击右下角的LOGO来激活,或者按快捷键ctrl+alt+shift+c来激活。

激活后呢,就是这个样纸。左边呢是html面板,右边是css面板。

左边的HTML面板可以点选类名,然后修改它们。

 

点选修改后

右边的css也是可以选中地,也可以随意禁用任何css属性。

是不是太宜人了呢?

 

 

 

      Yslow&PageSpeed– 诊断各种缓慢症状

 

    Google的PageSpeed和yahoo的yslow是各位不可少的前端工具(同样也都是firebug的插件,安装了firebug之后才可以拥有她们),当各位无法用三寸不烂之舌收拾产品和各种大佬的时候。我猜您可以用这两锅说服他们。

slow地界面一如往常的顺眼

下面简单说一下yslow的主要功能

    其中上图标示3的地方是yslow的几个主要功能的选项卡

 

    第一个选项卡是当前页整体评分(Grade),个人对这个很不敏感。点选后为下图(个人对评分很不敏感)

 

    第二个选项卡是当前页的一些加载进来的各种文件统计,点选后为下图

 

    第三个选项卡是状态,左边的饼图是缓存前的状态,右边的是缓存后的状态。点选后为下图

 

    第四个选项卡是一些yslow推荐的优化工具(我个人经常用的是smush,可以无损压缩各种web端的图片)点选为下图

 

 

    OK,最后一个小工具PageSpeen带着明显的google血统出场了,一如既往的简约而不简单。

    在各位激活pagespeed地时候,就会立刻不骚等的出现当前页面的一些需要优化的提示。红色表示急切需要优化,黄色表示还阔以。绿色表示优化的很好。

    当点开急切需要优化的optimize images这栏的时候,就会出现这样的界面,直接点选图片就会下载已经压缩好的图片,十分安逸。(本地的html不阔以压)

 

 

    OK。这次就到这里吧。因为鄙人暂时为firefox的粉,所以暂时只稍微介绍了一些围绕她的工具。

    希望下次有时间给分享各种工具地各种深入地牛B地功能。谢谢。

    各位,晚安。

 

    BTW,不管高手新手设计前端运营还是产品,看过我的文章咱就是朋友。留下您的脚印,下次咱继续给您找乐。

  1. 小嘿 说:

    sublime_text ,这个我觉得也蛮好的编辑器,好看。

  2. bengle 说:

    editplus,貌似跟神器vim没法比吧。。。

  3. zoowar 说:

    都是我在用的,还有一些常用的呢没有提到。例如截屏插件,颜色吸附插件等。个人觉得比较好。

  4. thomas 说:

    呵呵,正用着。写得不错

  5. 浴室夹 说:

    工具虽好,可不要贪多哦~

  6. pigyaa 说:

    谢谢分享~~

  7. 怎么没有演示的效果呢?

  8. 白白 说:

    亲, 能提供一下Yslow的下载地址么~谢谢

    • 蝈蝈漫步 说:

      在firefox浏览器的附加组件里搜索“yslow”即可,不过要先安装firebug

  9. 前端 说:

    @必答网
            火狐把所有牛X的插件全部装上去不就是开发人员的浏览器

  10. xiaoturn 说:

    还有一个写CSS的神奇,Zen Coding。不妨试一下。

  11. 不错的文章,学习了!写的很详细

  12. 必答网 说:

    下次来个网站开发者专用的浏览器吧

  13. martin 说:

    好东西,收藏

发表你的评论