Collection of Web Developer Tools, per Browser

With so many browser out there in the wild, working as a Web Developer certainly is not an easy job these days. Thankfully, over the last years, decent tools have been developed by bright people that make developing and debugging of code easier for the developer. But sometimes, it is not easy to keep track which tools are at a Developer’s disposal (and which are actually usable). The following article seeks to list the best tools available and quickly describing how to activate/install/use them.

To give a quick overview of the tools per browser, please refer to the table below.

Browser

Available Tools (main area of debugging in parenthesis)

Firefox

IE6, IE7

Opera

Safari

Web Developer Toolbar

If you can only pick one extension to install for debugging and developing web sites in Firefox, it has to be the Web Developer Toolbar. A real gift for web developers, cause it consists of a myriad of tools ranging from Cookie related tasks (disable, delete, view their content) to CSS, display of line guides, ruler and much too many to mention. Go and install it now.

Firebug

If you are using Firefox, Firebug is probably the first or second extension you should install (in addition to Web Developer Toolbar). Firebug lets you inspect, monitor and edit HTML, CSS and JavaScript live on any web page. In addition to that, it provides a script console which makes JavaScript development much easier. The console object offers a huge load of options that lets you output code to the console and debug it. Michael Sync provides a tutorial that explains these options in further detail. Also included in Firebug is a bandwidth monitor to track which resources on your site consume how much bandwidth. A must.

Firebug Lite

Firebug Lite is a pure JavaScript implementation of the above mentioned Firebug for browsers other than Firefox. To make things even easier, a bookmarklet can be drag & dropped into the navigation bar which then puts in the required JavaScript code and runs Firebug Lite “on the fly”.

Modify Headers

Modify Headers is a useful extension to add, modify and filter out HTTP request headers. As stated on the web site, you could fake a request from a mobile device or an Ajax request.

Poster

Page 1 of 3 | Next page