Welcome to "Secrets of the Browser Developer Tools"! Over the last few years there has been one tool that has helped out every web developer more than any other – the browser developer tools. Working in harmony with the web browser, the developer tools allow us to manipulate DOM elements; gauge performance and debug JavaScript from within the browser window in real time.

Happy Developing!

Andi Smith

What are Developer Tools?

Nowadays it seems hard to imagine ever building a website without one of these handy tools, which are normally accessible by either pressing "F12" in Windows or "Cmd" ⌘, "Option" ⌥ and "I" on the Mac, or by right clicking on the page and selecting “Inspect Element”.

Browser Development Toolset Type Documentation
Chrome Developer Tools Integrated Documentation
Firefox Firebug Add-on Documentation
Firefox Developer Tools Integrated Documentation
Internet Explorer Developer Toolbar Integrated Documentation
Opera Dragonfly Integrated Documentation
Safari Developer Tools Integrated (Default off) Overview

The Ideal Developer Tool Environment?

Historically developers have used Firefox's Firebug add-on to develop and debug their websites, but in recent years Chrome's Developer Tools have pulled away from the others offering superior functionality.