Browser Developer Tools

The browser dev tools are an indispensable part of the front-end web development workflow. They can be very useful for server-side web development as well.

The tools provide, generally, a representation of the live DOM, a network monitor, a console (for viewing messages from the browser and entering commands), and various other utilities depending on the browser.

This post will simply cover how to open the dev tools in each browser, and provide a link off to their respective documentation sites where you can learn much more.

Google Chrome

With the browser open and a page loaded, press Ctrl + Shift + I (F12 works too) on Windows or Alt + Cmd + I on Mac.

You should see something like this.

Learn more about the Chrome Developer Tools here.

Safari (OSX)

Open Safari and press Alt + Cmd + I. Alternately, if you have the ‘develop’ menu enabled, click ‘develop’ and click ‘Open Web Inspector’.

Learn more about the Safari Developer Tools here.

Firefox

Open Firefox and press F12 (Windows) or Alt + Cmd + I (Mac).

Learn More about Firefox Developer Tools here

Microsoft Edge

Open Edge, and press F12. The same key will open the developer tools in IE9-11.

Learn More about the Edge Developer Tools here.

Learn to use these

Spend some time getting to know at least one of these tools in-depth. They are the key to debugging CSS, JavaScript, and DOM structure issues. They will even help you debug application and http issues via the network monitor and console.

Don’t be overwhelmed by the variety of tools; once you understand the functionality of one, you will have a reasonable command of all.