
前几天发了一篇《2010年天朝前端发展回忆录》,颇为意外,讨论最多的居然是前端IDE的话题,究竟哪款IDE才是最适合或是为前端量身定做的IDE?就目前来看,这个话题还没有答案,因为大部分IDE的出现并不是为前端服务的(aptana除外,但aptana目前越来越偏重ruby了,所以称其为ruby的IDE更恰当)。同时,这个话题也激发了明河写一篇前端开发工具总结文章的想法。
工欲善其事必先利其器
对于那门语言来说工具都是非常重要的一块,前端开发的情况比较特殊,五花八门,十八般武器都有,而这个行业真的发展很快,新工具也是层出不穷,这对于前端初学者来说,既是福音,又是麻烦事,选择多了,未必是件好事,当然没选择,就绝对是件坏事。
接下来明河根据自身对工具的使用感受,将前端工具做了下总结和归类。同时我会在接下来的时间写出关于这些常用工具的使用教程。
武器一:前端开发IDE
最佳前端开发IDE:IntelliJ IDEA
推荐指数:![]()
![]()
![]()
![]()
![]()

凭什么最佳IDE是IntelliJ IDEA?论资历比不过dreamweaver(其实在java开发中idea的名气是蛮大的,国内用的人太少);论血统比不过aptana(aptana的诞生还是很明确的,就是前端开发用的。);论轻巧比不上editplus、nodepad++;论牛逼还有Visual Studio横在那呢。
关于理由,明河这里先不讲,等日后明河发IntelliJ IDEA的系列使用教程时,会一一给朋友们演示IntelliJ IDEA强悍的地方。
明河使用DW不下1年,使用aptana也不下1年,期间还陆续使用了editplus、nodepad++,而明河使用idea只是二三个月,就把其他工具给抛弃了,剩个nodepad++(轻量的好处就是打开快,便于快速调试)。
idea教程正在谋划中,敬请期待!
武器二:前端开发调试器
最佳前端开发调试器:firebug
推荐指数:![]()
![]()
![]()
![]()
![]()

firebug作为最佳前端开发调试器,应该是毫无争议的,也许你会告诉明河还有google chrome开发者工具呢。是的,论功能google chrome开发者工具不输于firebug,但论影响力firebug就非google chrome开发者工具可比,firebug的出现在整个前端发展史上具有重要的意义。
firebug的使用,我想明河无需多此一举写教程了,大家都懂的…..
最佳性能分析器:YSLOW
推荐指数:![]()
![]()
![]()
![]()
![]()

前端工程师诞生于雅虎,而雅虎对于前端发展推动作用是巨大的,比如js框架YUI2、YUI3,比如yuicompressor,比如YSLOW,SLOW阐述的几个关于web性能优化准则,已经成为前端行业标准。
最佳远程调试器:fiddler(小提琴)
推荐指数:![]()
![]()
![]()
![]()
![]()

fiddler的本地代理调试真的非常的方便和强大,尤其是调试ajax的时候(调试ajax,如果你复制一份代码到本地,存在跨域问题,请求不到数据而使用fiddler不用担心这个问题)。
武器三:前端文件压缩/编译器
最佳压缩器/编译器:yuicompressor和Google Closure Compiler
推荐指数:![]()
![]()
![]()
![]()
![]()
从js压缩的质量来看,Google Closure Compiler的压缩率比yuicompressor高些,Google Closure Compiler更准确说法应该是编译器。它要求你的js符合规范,不然压缩后的js很容易报错,yuicompressor一般没这个问题。css的压缩二者相差倒是不大。目前明河是二者都有用,yuicompressor用的更频繁些。
武器四:前端开发build工具
最佳前端开发build工具:ant
推荐指数:![]()
![]()
![]()
![]()

这里的build工具主要指的是一键合并、压缩、移动、删除js文件、css文件等。
关于ant,明河写了不少教程:
- ant入门指南—web前端开发七武器(1)
- 认识基础任务标签(上)—ant入门指南(3)
- 认识基础任务标签(下)—ant入门指南(4)
- property—ant入门指南(5)
- dataType—ant入门指南(6)
- ant结合yui-compressor和closure-compiler—ant入门指南(7)
- ant结合jsdoc构建js文档—ant入门指南8
武器五:多浏览器
最佳IE多版本浏览器:IETEST
推荐指数:![]()
![]()
![]()
![]()

浏览器兼容性调试,是前端工作的很重要的组成部分,其中以IE6、IE7、IE8的调试最让人头疼,IETEST可以解决这一问题,值得一提的是IETEST也只是模拟,没有达到百分百的真实效果,有条件的最好用虚拟机。
备选多版本浏览器:Browser Sandbox
武器六:javascript测试器
最佳javascript单元测试框架:Jasmine
推荐指数:![]()
![]()
![]()
![]()

Jasmine是kissy使用的js测试框架,也是明河鼎力推荐的测试框架。
武器七:版本控制系统
最佳版本控制系统:git
明河结语
欢迎朋友们补充其他前端工具,明河在此先拜谢。


IntelliJ IDEA,对于我现在的老爷机来说,eclips,zend之类都有些太奢侈。对于php开发者来说,idea只有ultimate版有对应的功能,社区版就没有了。我现在做的都是些小打小闹的东西,基本上都是notepad++。这七种武器里头,我最喜欢的还是firebug,简直是前端开发者的福音。
notepad++很好,我也很喜欢,速度快,插件也是颇为丰富。firebug也是明河的最好,很多人开始用chrome的调试器,不过我用的不是很习惯。
恩。。。顶一个。。。静候相关教程。。。
你难道用 IETEST 来测试多ie的兼容性么? 各种无端的卡机 死机 崩溃 不支持ie的插件
个人推荐 Xenocode Browser Sandbox 或者 iecollection
IETEST的确有诸多问题,应急还是可以的。Browser Sandbox不错,哈王道是虚拟机。大的公司有专门的兼容性测试机器,包罗万象,苹果、ipad等都有…..
武器一,没用过! 我表示IETEST,很鸡肋!!
钟爱、Editplus 开发必备!
最关心可以把vim嵌入IntelliJ IDEA不~
自从用上vim以后再也受不了用鼠标慢慢定位了~
……没办法,一般使用vim后的人,都受不了使用鼠标定位的IDE。IntelliJ IDEA也是可以不用鼠标定位的,我现在基本上已经脱离鼠标了。
好久没来了,支持了~
博主的文章很不错,我是站长工具-站长精灵的作者,一款专业的SEO工具软件(可以帮您提高博客的流量),想跟您交换个链接,不知可否
额。。。七剑下天山?
……这里的七武器不是指《七剑下天山》的七剑,而是《风云》里面的七武器,图上不是有绝世好剑和雪饮狂刀…..
七剑下天山,剑剑都给力啊!~~~~~~~
……..真的不是七剑下天山,杯具,看来我这图拼接的不好…….
昨天在功能升级过程中发现搜狗的网站评级系统升级了,由原来100分制变成10分制,而且增加了专用查询服务器,查询链接格式为http://rank.ie.sogou.com/sogourank.php?ur=http://www.wsprite.com/,特来提醒朋友,快试试自己的博客和朋友的博客是属于哪个级别。
IEtest不稳定啊~~记得微软有一款自己的兼容测试工具的
哦?叫啥名字?我赶紧补充上。
@老饕, 你说的是不是SuperPreview?
博主,兔年快乐!
IntelliJ IDEA 小提琴也没用过~ 其它都用过吧~老伙计 新年快乐哟~
哈,新年快乐!
正好在做这方面的工作,工具有几个在用呢
很有深度的一篇文章哦,值得学习!
最佳前端开发IDE,IntelliJ IDEA当之无愧!
哈,我也这么认为。
Intellij IDEA 有没有好的使用教程推荐呢,英语太破了
打算日后写个系列教程。
貌似会删评论?我发了之后还在期待回复呢。虽然跟文章内容关联不大,但也不是广告啊。嗯,反正你们的网站你们可以随便删除。
ant关于jslint的介绍到底以后还会出吗?
呵呵,没有删除评论,而是这段时间非常忙,没看博客,不好意思。
ant关于jslint会出,现在没这么快。要到八月中旬开始写ant相关内容。
等IDEA教程,现在打算只用Npp跟IDEA了,然后慢慢把Npp升级到Vim
恩,idea的教程没那么快。我现在也打算用vim了。
期待你的IntelliJ+IDEA的教程
期待教程
用win7我就不用IETEST了。。他提供的xpmode还是很给力的