前端工具集合

常用前端開發工具合集

1.Firebug http://getfirebug.com/
最流行的前端開發工具

2.HttpWatch http://www.httpwatch.com/
集成在IE和Firefox上的監聽HTTP和HTTPS的工具

3.Fiddler http://www.fiddler2.com/fiddler2/
Fiddler是一個記錄你電腦和網絡之間所有HTTP(S)請求的網絡調試代理

4.HttpFox https://addons.mozilla.org/eu/firefox/addon/6647?lang=en-US
和HTTPWatch很類似的一個工具

5.Yslow http://developer.yahoo.com/yslow/
Firebug的一個擴展，可以根據高性能網站的一些準則來分析網頁并且提出建議來提高網站的性能

6.Css Usage https://addons.mozilla.org/zh-CN/firefox/addon/10704
Firebug的一個擴展，可以用來察看哪些CSS被用到了

7.VIM http://www.vim.org/
一個高級的文本編輯工具，是在UNIX系統上面VI編輯器的升級版本

8.Editplus http://www.editplus.com/
Windows系統上的一個好用的文本編輯器

9.DNS Flusher https://addons.mozilla.org/en-US/firefox/addon/7408
Firefox上的一個附加組件，當HOST文件改變時可以很快地更新頁面而不需要重啟瀏覽器

10.PageSpeed http://code.google.com/intl/zh-CN/speed/page-speed/
Page Speed 是開源 Firefox/Firebug 插件。網站管理員和網絡開發人員可以使用 Page Speed 來評估他們網頁的性能，并獲得有關如何改進性能的建議

11.Dust-me Selectors https://addons.mozilla.org/zh-CN/firefox/addon/5392
Firefox上的一個附加組件，可以找出沒有用到的CSS選擇符

12.Myspace Performance Tracker http://msfast.myspace.com/
Myspace的性能分析工具, 可以分析到頁面渲染的各個階段的時間、CPU和內存的消耗情況，只使用于IE中

13.YUI Compressor http://developer.yahoo.com/yui/compressor/
用java寫的一個代碼壓縮工具，使用方法： java -jar yuicompressor-x.y.z.jar [options] [input file]

14.JS Beautifier http://jsbeautifier.org/
在線JS格式化工具

15.JSLint http://jslint.com/
在線JS校驗工具，使用請注意“JSLint will hurt your feelings.”

16.JSCompress http://jscompress.com/
在線JS壓縮工具

17.JSMin http://www.crockford.com/javascript/jsmin.html
JS壓縮工具

18.HTML2Javascript http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
HTML到JavaScript轉換器獲得置標并將它轉換成一系列可以在JavaScript塊中使用的document.write()申明

19.Web Developer https://addons.mozilla.org/da/firefox/addon/60?lang=zh-CN
Firefox的一個附加組件，給Firefox增加了一個菜單以及工具欄，里面包含了很多開發工具

20.JS Regexp Generator http://www.jslab.dk/tools.regex.php
一個制作正則表達式的在線工具

21.Opera Dragonfly http://www.opera.com/dragonfly/
Opera Dragonfly 是Opera瀏覽器的跨設備，跨平臺調試環境—調試 JavaScript, 檢查編輯CSS和DOM， 并且查看移動設備或計算機上的錯誤

22.IE Web Developer http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
微軟的瀏覽器開發者工具條為網頁的快速創建，理解和故障診斷提供了各種的工具

23.DynaTrace http://ajax.dynatrace.com/pages/
一個頁面性能分析工具，是針對瀏覽器 IE 6 ~ 8 的。它可以用來分析頁面渲染時間、DOM方法執行時間，甚至可以看到 JS 代碼的解析時間。多謝“有米啦”同學的推薦，好友卓群的 博客以前也介紹過

24.IE Tester http://www.my-debugbar.com/wiki/IETester/HomePage
IETester是一個免費的瀏覽器，它同時包括了IE 5.5、IE 6、IE 7、IE 8的所有內核，多版本IE測試好工具,DIV測試,CSS兼容和各個版本瀏覽器兼容檢測工具

25.Companion JS http://www.my-debugbar.com/wiki/CompanionJS/HomePage
IE下的js調試工具，需要結合Microsoft Script Debugger使用，通過安裝這個工具，但頁面出現錯誤時會在左上角彈出一個小錯誤提示，點擊會在IE下面顯示出一個錯誤控制臺，就如FF下的 firebug控制臺一樣，錯誤信息提示很詳細

26.Live Http Header https://addons.mozilla.org/zh-CN/firefox/addon/3829
live HTTP headers是firefox的一個插件，可以查看到http頭，非常方便

27.Closure Compiler http://code.google.com/intl/zh-CN/closure/compiler/
Google的JavaScript編譯工具