Chrome Developer Tools

What, Why, and When

Chrome Developer Tools is a set of tools built into the browser that allows developers to test and debug their code easily in the browser.

Developer tools significantly speed up the development process by allowing you to test things in the browser before you implement them in your actual project.

You can use developer tools to easily make quick CSS changes and see how they will look without having to edit your CSS, save the file, and refresh your web page.

The Tools

To access the Chrome Developer Tools, right-click on any element in the page and choose Inspect from the dropdown menu that appears.

Alternatively, the keyboard shortcuts for opening the Chrome Developer Tools on a Mac are Option-Command-I. On a Windows machine it is Ctrl-Shift-I.

For example, navigate to Google.com and right click on the word 'Google' and choose Inspect.

A set of windows will open that appear similar to the following:

Two panes appear at the bottom of the web page. The pane on the bottom left contains the HTML elements found on the Google home page. From the image, you can see that <img> tag for the Google banner is high-lighted.

The pane on the bottom right details the CSS elements for the HTML element selected on the left.

Any change made directly to one of the CSS styling elements that are listed should be reflected directly in the browser.

Do not worry about making changes to either the HTML and CSS elements. The page is only loaded locally on your machine and so any changes will only be reflected on your machine. You will not be altering the way the Google home page looks for the whole world.

Though it may seem overwhelming at the moment when using the DevTools on a website like Google or Amazon, they will become invaluable to you when operating on your own websites.