前端开发大众手册(包括工具、网址、经验等)实用指南

作者：袖梨 2026-09-23

平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“前端开发大众手册(包括工具、网址、经验等)”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。

落到代码里，今天闲来无事，把一些工具(online和client的)、常用网址、以及经验总结等罗列出来和大家分享下。这个标题起地大了点，肯定会有很多地方没列到，包括类目的分法也可能考虑不周，所以还请大家积极补充指正，能够直接留言，也能够发邮件给我(sorrycc#gmail.com)。之所以加上“大众”两字，因为以下资源对于高手来说可能早就很熟悉了。

理解这一步时，另外想提一句，工具是死的，好不好用得看你会不会用。比如Firefox、Fiddler等，除了显而易见的功能以外，都有一些小的技巧，掌握了能够让你事半功倍。

更新记录：

  • [20081025] 第一版

快捷导航：

  • 在线工具集
  • 常用Firefox插件
  • IE下的调试工具
  • 参考手册
  • 批处理工具
  • IDE及其他工具
  • Bookmarklet
  • 前端开发者社区及权威网站
  • 建议订阅的博客和网站

另外还搞了个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}ScriptsBrowserPAC.js设为代理进行采用。Firefox下可用上述"Fiddler 开关"进行更快切换。兼容插件。
  • 在这个场景下，IE Developer Toolbar —— 查看元素、禁用缓存、禁用CSSJS、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，子鼠，西风坊 ……

从实现思路看，总的来说，前端开发适合结合实际项目边做边理解。先抓住核心思路，再逐步补上细节和边界处理，最后效果会更稳定，也更容易复用。

相关文章

精彩推荐