转载:陈成
一直觉得前端开发缺个手册,这是个体力活。不过总得有人来干。
今天闲来无事,把一些工具(online和client的)、常用网址、以及经验总结等罗列出来和大家分享下。这个标题起地大了点,肯定会有很多地方没列到,包括类目的分法也可能考虑不周,所以还请大家积极补充指正,可以直接留言,也可以发邮件给我(sorrycc#gmail.com)。之所以加上“大众”两字,因为以下资源对于高手来说可能早就很熟悉了。
另外想提一句,工具是死的,好不好用得看你会不会用。比如Firefox、Fiddler等,除了显而易见的功能以外,都有一些小的技巧,掌握了可以让你事半功倍。
更新记录:
- [20081025] 第一版
快捷导航:
另外还搞了个Firefox插件《前端开发工具集》,把资源整合到一个菜单下,方便查询。数据放在线上(Google AppEngine),速度应该会有保证,更新也会比较方便哈,见图。
在线工具集
- 书籍类:
- Book Shelf 2.0 beta —— 荐,分类很清晰,下载很方便
- Book Go!
- 原版图书免费下载链接收集站
- 51CNNET.NET
- JavaScript类:
- Beautify JavaScript —— JavaScript格式化工具,效果很理想
- AJAX Libraries API
- Regex Tester
- Compressor Packer —— 以前一直用这个压JS,自从有了TBCompressor,就放弃他了
- CSS类:
- CSS选择器性能测试
- CSSTidy —— CSS格式化工具
- CSS Compressor —— CSS压缩
- 其他:
- GUID 生成器 —— 做某些东西(Firefox插件)时需要唯一资源标志符时用
- W3Counter
- WebWait - Benchmark Your Website
常用Firefox插件
- 支付宝安全控件 和 旺旺协议 —— 网购专用,Firefox+浦发网银,无敌了
- Firebug —— 这个不用介绍了吧,附空帏的外部编辑器乱码修正版
- Firecooike —— 支持Cookie的查看和编辑
- Jiffy —— 调试性能的,用起来比较麻烦,没试过
- YSlow —— Why Slow? YUI出品
- Pixel Perfect —— 把设计稿直接拖到Firefox里进行对比
- Rainbow for Firebug —— JS高亮,性能不是很理想
- Fiddler 开关 —— 简化在Firefox里切换Fiddler的操作,感谢Taobao UED的空帏同学
- Web Developer
- DevBoi —— 把Html, Dom, JavaScript等手册放在侧栏里,可以自定义增加,快捷键Ctrl+F9。可以在这里找到更多的Package。
- RefControl —— 针对每个站点发送想要的HTTP Referer
- GreaseMonkey —— 看某个网站不爽,写个小脚本来优化下还是不错的
- HttpFox —— 查看当前Http链接状态,类似IE下的HttpWatch
- User Agent Switcher —— 切换User-Agent,同时开发iphone和web版本的时候很方便
- FoxyProxy —— 穿墙工具,配合专业代理公布器使用很和谐
IE下的调试工具
- Fiddle2 —— 非常强悍的一款http流查看工具,默认支持IE,其他浏览器可以设置将{Document}\Scripts\BrowserPAC.js设为代理进行使用。Firefox下可用上述"Fiddler 开关"进行快速切换。支持插件。
- IE Developer Toolbar —— 查看元素、禁用缓存、禁用CSS\JS、Outline元素、查看生成的源码等功能,IE8自带了一个加强版的。
- Microsoft Script Debugger + Companion.JS —— 调试JS用,虽然报错还是有误差,但是我已经满足了。安装顺序是:Microsoft Script Debugger,Companion.JS,在"IE选项-高级"里取消禁用脚本调试。
- 多版本IE共存两种方案:
- IE7/8 + IE Tester —— 大众型配置,可以基本满足日常需要。
- IE6 + Internet Explorer Collection —— 在IE 6用户占绝对优势以及IE 6神奇bug满天飞的时代,我还是推荐这种方案,因为只有神奇的原装IE 6,才能抵挡运营神奇的问题。另外如果还有其他机器可供支配的话,建议再装个IE 8 + IE Tester,因为IE 8下的Developer Toolbar还是有很大改进的,调试起来会方便一些。
- 以下三个软件相对不重要些:
- HttpWatch —— http流查看
- Instant Source —— 可查看JS生成的源码
- NetLimiterPro —— 网速限制
参考手册
- XHTML、CSS & DOM W3C 手册 —— 玉伯整理的版本,包含了W3C手册以及其他有用的资料。
- 苏昱的CSS中文手册和Dom中文手册
- JScript语言参考
- XML指南
- XMLHTTP参考手册
- jQuery 1.2.6 API和jQuery and jQuery UI Reference 1.2
- Apache 2.2 中文版参考手册在线版
- MySQL 5.1 参考手册 (在线版)
- PHP手册
- YUI Cheatsheet
- Cheat Sheet Roundup - Over 30 Cheatsheets for developers
- 23个Cheatsheet打包下载
批处理工具
- TBCompressor —— 淘宝UED的JS/CSS压缩工具,详见玉伯的介绍
- pngOptimizer —— png优化工具
- jpegTran —— jpeg去冗余meta工具
IDE及其他工具
- Editplus v301 汉化版
- Tortoise SVN
- 移动版本的 Apache + PHP —— 灰常灰常好用,灰常灰常移动,见明城的说明
- …
Bookmarklet(右键另存)
- Firebug Lite —— 官方介绍
- Xray —— 官方介绍
- MRI —— 官方介绍
- ‘+ window.document.documentElement.outerHTML+ ”">查看生成的源码,‘+ window.document.documentElement.outerHTML+ ”);})()">打开新窗口查看生成的源码 —— for IE
开发者社区及权威网站
- Mozilla Developer Center (MDC)
- YAHOO! Developer Network (YDN)
- Dev.Opera
- Apple Developer Connection
- MSDN
- IBM Developers中国 (Web 前端开发技术专题)
- WebKit
- AOL Developer Network
- SlideShare - Share PPT —— 在线PPT分享,资源丰富
- Google Doctype —— Web开发人员的百科全书
- W3C (香港,中国)
- Position Is Everything
- HTML Dog
- 维基百科
推荐订阅的博客和网站(排名不分先后)
- 国外
- 内容聚合:A List Apart,Ajaxian,Smashing Magazine,456 berea street,Script & Style,CSS Globe,CSS-Tricks,SitePoint
- 团队Blog:Yahoo! User Interface Library (YUI),IEBlog
- 个人Blog:John Resig,PPK: QuirksMode,Douglas Crockford,Dean Edwards,Nate Koechley,Julien Lecomte,Eric A. Meyer,Andy Budd,Steven Levithan,HedgerWow
- 国内
- 内容聚合:Blueidea,无忧脚本,网页设计师(W3CN),JavaScript教程网
- 团队Blog:淘宝,口碑,阿里巴巴国际站,阿里巴巴中文站,阿里巴巴中文站前端开发团队(方凳),阿里妈妈,支付宝,阿里软件,19楼,九天音乐,金蝶与友商网
- 个人Blog,这里列出的是原创并更新相对频繁的博客,如有遗漏,请告之(sorrycc#gmail.com):怿飞,手气不错,Realazy,old9(需穿墙术),沙滩凉鞋(空帏),射雕(玉伯),Aether,振之,嗷嗷,JunChen,爆牙齿,秦歌,克军,5key,小志,Rage(正淳),麦鸡,云烈,老冒,番茄红了,Joyqi,卢力,CSS森林(Ghost),Twinsen,Gulu77,Rlog,Dlog,子鼠,西风坊 …
分类: 资料汇总