一直覺得前端開發缺個手冊，這是個體力活。不過總得有人來幹。
今天閒來無事，把一些工具(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+浦發網銀，無敵了
- 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 —— 穿牆工具，配合專業代理公佈器使用很和諧
- 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工具
- Editplus v301 漢化版
- Tortoise SVN
- 移動版本的 Apache + PHP —— 灰常灰常好用，灰常灰常移動，見明城的說明
- …
Bookmarklet(右鍵另存)
- Firebug Lite —— 官方介紹
- Xray —— 官方介紹
- MRI —— 官方介紹
- <A href="javascript:''+ window.document.documentElement.outerHTML+ '‘+ window.document.documentElement.outerHTML+ ”">查看生成的源碼，<A href="javascript:(function(){var w=window.open('about:blank');w.document.write(''+ 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，子鼠，西風坊 …
En: 資料彙總 — 10月 25, 2008
