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.
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.
Open Safari and press Alt + Cmd + I. Alternately, if you have the ‘develop’ menu enabled, click ‘develop’ and click ‘Open Web Inspector’.
Open Firefox and press F12 (Windows) or Alt + Cmd + I (Mac).
Open Edge, and press F12. The same key will open the developer tools in IE9-11.
Learn to use these
Don’t be overwhelmed by the variety of tools; once you understand the functionality of one, you will have a reasonable command of all.