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.
- Web Developer Toolbar (various)
- Firebug (DOM, CSS, JavaScript, Traffic)
- Modify Headers (Ajax)
- Poster (Ajax)
- XRAY, MRI (CSS)
- Firefox Accessibility Extension
- LiveHTTPHeaders
- IE Developer Toolbar (DOM, CSS)
- Web Accessibility Toolbar (Accessibility and more)
- XRAY, MRI (CSS)
- Visual Web Developer Express Edition (JavaScript)
- Microsoft Script Debugger (JavaScript)
- Firebug Lite (DOM, CSS, JavaScript)
- Opera developer tools (DOM, CSS, JavaScript)
- Opera Error Console (HTML, CSS, JavaScript)
XRAY, MRI (CSS)- Web Accessibility Toolbar (Accessibility and more)
- Firebug Lite (DOM, CSS, JavaScript)
- Opera Dragonfly (DOM, CSS, JavaScript)
- Safari Debug Menu (JavaScript)
- XRAY, MRI (CSS)
- Web Inspector (Safari 3) (CSS, DOM)
- Firebug Lite (DOM, CSS, JavaScript)
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