Browser Developer Tools - Tips, Tricks, Documentation

These days all popular browsers - IE, Firefox, Chrome, Opera, Safari, come with Developer Tools that help web developers debug HTML, JavaScript & CSS issues & build better web pages.

It's probably the Netscape browser that first started helping developers with the Error Console option that would specify on which line a script error occurred & the possible cause. Firefox inherited that option while Firebug, the Firefox add-on, extended debugging facilities within Firefox to a different level. Firebug's feature-set is so comprehensive, it is possibly the inspiration for all the Developer Tools within popular browsers. Each browser's Dev Tools have some special features & they are continously evolving, thanks to the competition among themselves. The Developer Tools option can be invoked with the keyboard shortcut F12.

Here is a compilation of links to the official documentation, tips & tricks for the Developer Tools -

Internet Explorer:

• How to use F12 Developer Tools to Debug your Webpages (IE9, MSDN)
• F12 Developer Tools (IE8, MSDN)
• IE9 Developer Tools: Network Tab (IEBlog)
• Discover F12 Developer Tools in IE9(Net Magazine)

Firefox/Firebug:

• Firebug Wiki

Chrome:

• Google Chrome Developer Tools
• A Re-introduction to the Chrome Developer Tools (by Paul Irish).
• Chrome Developer Tools for Speed (by Paul Irish).
• Google Chrome Developer Tools: 12 Tricks to Develop Quicker (by Paul Irish).
• 25 Secrets of the Browser Developer Tools (Andi Smith).
• A Summary of the WebKit Developer Tools (Adobe blog)

Opera:

• Opera Dragonfly Field Guide

Safari:

• Safari Developer Tools

Work in progress...