前端開發大眾手冊 - twobin－IT工程師數位筆記本

文章出處

by chencheng

一直覺得前端開發缺個手冊，這是個體力活。不過總得有人來干。

今天閑來無事，把一些工具(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 —— 網速限制