前端开发大众手册(包括工具、网址、经验等)October 25, 2008
一直觉得前端开发缺个手册，这是个体力活。不过总得有人来干。
今天闲来无事，把一些工具(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，子鼠，西风坊 …
支持你！
下载手册，box.net提示This user is out of bandwidth.
多谢提醒，已修正
好强大。。。
Firefox下的菜单快捷(D)和地址栏冲突，我无法 Alt+D 快速定位到地址栏了
@kevin 按F6多好啊，记录一下，下个版本改进
@chencheng
发现淘宝工程都有写博的习惯，尤其搞前端的。
ps：我刚做过评论，怎么cookie记不住我的用户名？
呃...感谢分享
十分感谢
¿Añadir la URL de tu blog?
firefox评论区域，出现乱码?
额，我是来感谢博主提供的Yslow插件的……
[...] 陈成的博客 — 前端开发大众手册(包括工具、网址、经验等) - [...]
very good
[...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]
so酷~~ 辛苦啦。先收藏。有空再细看。
[...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]
强大啊 学了很多 支持楼主
[...] 春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事，节后收到很多简历，加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历，数量上是相当的多，把这些简历一一看完真是一个漫长而幸苦的体力活，何况我还要仔细认真的去提取和核查有用信息评估其能力，尽量不错过任何一个埋藏在大量简历中合适的人，这绝大部分时间并不是一个相当愉悦的过程。所以，我感觉有必要来谈谈：如何做好一份前端工程师的简历。 一、你是前端工程师 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。毫无疑问，前端工程师应该知道如何用简历体现其专业技能和职业精神，这是每个应聘者应该考虑的问题。 二、内容为王 个人信息 姓名 （必需） 性别 （必需） 年龄 （必需） 联系电话 （必需） 学历及学位 （必需） 薪资期望 个人照片 邮箱 Blog 外语能力 职业技能 HTML、CSS、JavaScript/ActionScript等 Web标准、可用性、可访问性 一门非前端脚本的语言(Java、PHP、Python、C#等) 任何有利于前端开发的技能和兴趣 职业和教育经历 起始时间、单位名、职位（学位）和收获 简而精 按照时间倒序排列 代表作品 能体现自己现在前端技能或者重要经历的作品 简而精，且可以简要附上自己在这个作品中的收获 和别人合作的作品要注明自己具体完成的内容 在线链接要测试以保证可用，如果有其他人的变更应注明，较大变更就无需提交了 提供附件要注明与之对应的文件名 按完成时间倒序排列 依据实际情况，代表作品也完全可以直接融入到职业技能和经历中体现。当然内容不仅仅是这些，可以任意增加能体现前端工程师职业素质的信息。 三、Web是平台 毫无疑问，Web才是真正的平台，当这个平台的后端逐步被云所统治时（Amazon的很多服务和Google App Engine都初见端倪），那么云端的用户代理（比如浏览器）就是前端工程师的战场。前端工程师是可以长期从事且有前途的职业。 简历作为前端工程师迈向新征途而提交的第一份作品，应该毫不迟疑的用它来体现其专业技能和职业精神，所以Web页面是前端工程师简历的最好载体。它能体现前端工程师诸多专业素质： 知道为什么选择的DTD是下面中的一个而不是其他，这是对 HTML标准 的理解和思考 。 针对内容选择合适的HTML标签，合理的id和class命名，尝试使用 微格式 ，这是对语义化的理解和思考。 至少兼容 YUI中列出的A-grade浏览器 ，这是对跨浏览器和CSS Hacks的理解和思考 。 虽然Web性能在大访问量下才比较容易凸显，但把尝试把 YAHOO性能团队的34条最佳实践 应用上，一定会小中见大且受益终生的 。 JavaScript的应用 简历的信息结构一般很简单，但是这并不意味着无法使用JavaScript来增强它的交互。找出其JavaScript技能和简历相互结合的地方。 可以尝试使用某种框架（YUI、jQuery、Prototype、Mootools等），很明显框架能提高我们的开发速度，掌握至少1中优秀的框架能增强我们的价值。 可以利用JavaScript做出几个彩蛋在简历里面么？ 实现结构、样式和行为的分离。 理解和体现DOM Scripting、预留退路（Graceful Degradation）、渐进增强（Progressive Enhancement ）、无侵入的JavaScript（Unobtrusive Javascript）等思想。 空帷翻译的《理解“渐进增强(Progressive Enhancement)》是篇这方面的好文章。 可访问性，在这上面每一步的深入研究和应用都值得赞赏。 HTML5、CSS3、SVG、Canvas甚至离线技术、安全技术都可以和我们的简历结合起来。列表When can I use… 提供了一些新技术在主流浏览器的支持情况。 打印样式，很明显前端简历不仅仅是其主管看，还有HR和大老板看，所以准备打印样式是很重要的，这不仅仅是技能问题，更是一种前端开发的素质。你需要知道，打印样式应该是黑字白底，且尽量少的装饰图片，因为现在的绝大部分办公打印机还是黑白的，且黑色更费墨，所以当你的简历是黑色背景时更应该注意这点。 简单设计，千万不要把你的简历搞一团糟，设计虽然不是前端工程师最重要的技能，但是良好的视觉设计更能体现前端工程师的价值，所以审美其实也是前端工程师的基础素质。如果对视觉设计感到困惑，你可以从看 《推荐给大家看的设计书》 开始。 四、细节决定体验 标识性的文件名，比如“秦歌的简历”、“秦歌的作品”，而不是“个人简历”、“我的作品”。 发完信后记得检查一下发件箱，确保没有忘记发附件。 简历和众多作品整体打一个包。不要一个大包里面无数个小包。且整个包应该整理过，去掉垃圾，不应该太大。 不要重复发邮件，特别是拒绝以后，还发一个同样的邮件，除非一段时间后你有较大进步。 检查链接有效性，无效链接很伤感情的，可以使用Firefox的插件LinkChecker或 Pinger。 实际上，前端工程师的工作成果是直接面向千万用户的，他直接决定了最终的用户体验，所以每个细节都至关重要，就像JavaScript编程一样，只要我们掌握 良好的风格要素，我们就能避免很多错误，实际上这个思想贯穿整个前端开发的始终，包括制作简历。 我很喜欢有个人blog的应聘者，因为通过其blog不仅仅可以看出他的前端技能、工作积累、职业素质和分享精神，同时他通过维护blog可以贯穿一个简单开发的始终，从内容、交互、视觉、前端一直到后端维护，而这些角色都是前端在开发过程中的上下游，需要经常协作，这种经历能使前端更高效的沟通和更务实的换位思考。同样，当我推荐前端的简历应该是以Web页面为载体时，也是基于这个想法，并适当的给出一些相关知识以备有兴趣的朋友朝这个方向走下去。虽然我的建议偏向于“HTML+CSS+JavaScript”方向的前端工程师，但实战中肯定有更多能够在简历中体现前端的技能和创意，这本身就是抛砖引玉，这仅仅是一个开始。 简历很重要，但人品、职业精神和专业的前端技能更重要，最重要的是这两者是相辅相成的。虽然很羡慕兄弟团队淘宝UED、支付宝UED 和 阿里巴巴B2B国际站UED能有创意、时间和精力搞出那么精致的招聘站点，但我更希望我未来的同事用技能、创意、时间和精力整出一个巨牛的前端工程师简历来震住我（kaven.yan@yahoo.com）吧。 This entry was posted on 星期五, 四月 17th, 2009 and is filed under 前端技术. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. « 腾讯页面重构招聘试题 [...]
Book Shelf 2.0 beta —— 荐，分类很清晰，下载很方便
提供下载了吗？没有吧
移动版本的 Apache + PHP 以后会在以下的页面不定期更新 :^)
http://code.google.com/p/gracecode/downloads/list
我能看看吗www.lovejk.com
http://osteele.com/是不可遗漏的大牛之一。建议加上：）
[...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]
Great post! I'll subscribe right now wth my feedreader software!
[...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]
http://regexpal.com/在线正则工具。
这个也是相当有用的。
太强大了,谢谢分享啊
[...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看 陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]
[...] 前端开发大众手册(包括工具、网址、经验等) Filed in xThink « 上网本，购前调查 [...]
sorrycc,好几个链接都不能下载
[...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]
[...] 在线工具集 [...]
[...] Frontend Engineering》 克军总结的“前端工程师应该关注什么”的思维导图中 陈成总结的《前端开发大众手册(包括工具、网址、经验等)》 YUI中列出的A-grade浏览器 YAHOO性能团队的34条最佳实践 [...]
Some people can’t get know how to notice the doctoral thesis referring to this good post. Hence, I would recommend your superior release. Moreover, some of them shoulld look for the thesis writing.
[...] 在线工具集 [...]
怎么没有 stevesouders 的。
http://stevesouders.com
It's not so simply to make a pretty good essays written, first of all if you are occupied. I consult you to define buy essays and to be free from disbelief that your work will be done by writing service
[...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 毫无疑问，前端工程师应该知道如何用简历体现其专业技能和职业精神，这是每个应聘者应该考虑的问题。 [...]
[...] 您在使用什么好的前端开发工具呢？ 还有其他前端总结的工具可以看一下，如云谦的http://www.chencheng.org/blog/2008/10/25/f2e-manual/，嗷嗷的http://www.aoao.org.cn/resource/ [...]
[...] 虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 [...]
您好，参考手册有些下载不了
http://assets.chencheng.org/resources/manual/css.chm
非常感谢博主传播知识与经验的精神与行为，相见很晚
博文很久没有更新了，是否考虑更新
[...]虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册[...]
好文，收藏至20ju.com
太牛叉了，这么多资源，感谢分享