Common front-end development tools Collection

1.Firebug http://getfirebug.com/
The most Popular front-end development tools

2.HttpWatch http://www.httpwatch.com/
Tools for listening to HTTP and HTTPS integrated on IE and Firefox

3.Fiddler http://www.fiddler2.com/fiddler2/
Fiddler is a network debugging agent that records all HTTP (S) requests between your computer and the network

4.HttpFox Https://addons.mozilla.org/eu/firefox/addon/6647?lang=en-US
A very similar tool to HttpWatch.

5.Yslow http://developer.yahoo.com/yslow/
An extension of Firebug that analyzes Web pages based on some of the guidelines of high-performance websites and makes recommendations to improve website performance

6.Css Usage https://addons.mozilla.org/zh-CN/firefox/addon/10704
An extension of firebug that can be used to see which CSS has been used

7.VIM http://www.vim.org/
An advanced text editing tool that is an upgraded version of the VI Editor on UNIX systems

8.Editplus http://www.editplus.com/
A handy text editor on Windows systems

9.DNS Flusher https://addons.mozilla.org/en-US/firefox/addon/7408
An add-on on Firefox that can quickly update the page without restarting the browser when the host file changes

10.PageSpeed http://code.google.com/intl/zh-CN/speed/page-speed/
Page speed is an open source Firefox/firebug plugin. Site administrators and network developers can use page speed to evaluate the performance of their pages and get advice on how to improve performance

11.dust-me Selectors https://addons.mozilla.org/zh-CN/firefox/addon/5392
An add-on on Firefox to find unused CSS selectors

12.Myspace Performance Tracker http://msfast.myspace.com/
MySpace's performance analysis tool can analyze the time, CPU, and memory consumption of each stage of page rendering, using only in IE

13.YUI Compressor http://developer.yahoo.com/yui/compressor/
A code compression tool written in Java, using the method: Java-jar Yuicompressor-x.y.z.jar [Options] [input file]

14.JS Beautifier http://jsbeautifier.org/
Online JS formatting tool

15.JSLint http://jslint.com/
Online JS Check tool, use please note "JSLint'll hurt your feelings."

16.JSCompress http://jscompress.com/
Online JS Compression tool

17.JSMin http://www.crockford.com/javascript/jsmin.html
JS Compression Tool

18.html2javascript http://accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/
The HTML-to-JavaScript converter obtains the label and transforms it into a series of document.write () declarations that can be used in JavaScript blocks

19.Web Developer Https://addons.mozilla.org/da/firefox/addon/60?lang=zh-CN
An add-on for Firefox adds a menu and toolbar to Firefox, which contains a lot of development tools

20.JS Regexp Generator http://www.jslab.dk/tools.regex.php
An on-line tool for making regular expressions

21.Opera Dragonfly http://www.opera.com/dragonfly/
Opera Dragonfly is a cross-device, cross-platform debugging environment for opera browsers-debug JavaScript, check edit CSS and Dom, and view errors on your mobile device or computer

22.IE Web Developer http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038 &displaylang=en
Microsoft's Browser Developer toolbar provides a variety of tools for rapid creation, understanding and troubleshooting of Web pages

23.DynaTrace http://ajax.dynatrace.com/pages/
A page profiling tool, which is for browser IE 6 ~ 8. It can be used to analyze page rendering time, Dom method execution time, and even to see the parsing time of the JS code. Thanks to "Rice" classmate's recommendation, friend combined's blog has been introduced before

24.IE Tester Http://www.my-debugbar.com/wiki/IETester/HomePage
IETester is a free browser that includes all the kernels of IE 5.5, ie 6, ie 7, ie 8, multi-version IE test tools, div test, CSS compatibility and various versions of browser-compatible detection tools

25.Companion JS Http://www.my-debugbar.com/wiki/CompanionJS/HomePage
The JS debugging tool under IE needs to be used in conjunction with Microsoft Script Debugger, by installing this tool, but the page error will pop up a small error prompt in the upper left corner, click will show an error console under IE, just like the Firebug console under FF , the error message prompt is very detailed

26.Live Http Header https://addons.mozilla.org/zh-CN/firefox/addon/3829
Live HTTP headers is a plugin for Firefox that can be viewed to HTTP headers, very convenient

27.Closure Compiler http://code.google.com/intl/zh-CN/closure/compiler/
Google's JavaScript compilation tool

Common front-end development tools Collection