About
Welcome
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!
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.