What are the Google Chrome DevTools?

The Google Chrome Developer Tools, also known as Chrome DevTools, are web authoring and debugging tools built right into the browser. They provide developers deeper access into their web applications and the browser. You can do everything from testing the viewport on a mobile device to editing a website on the fly, and even measuring the performance of an entire website or individual assets.

To use the latest version of the developer tools, you may want to use Chrome Canary, which is the experimental version of Chrome that is updated nightly. Chrome Canary can be run side by side with Chrome so you can check any issues that may arise.

You can enhance your development by going to chrome://flags and enabling the Developer Tools experiments feature. You can then use the settings panel in developer tools to toggle individual experiments.

We will be mentioning some of the Chrome DevTools keyboard shortcuts below, but you can see a full list of them on the Google Developer website.

Opening Chrome DevTools

#

There are a few ways to open Chrome DevTools, which means you can use the method that works best for you.

Open from browser menu

#

You can open Chrome DevTools from the Chrome menu. Go to More Tools and then click Developer Tools.

Open by right clicking

#

You can also open Chrome DevTools from the right click menu. Right click on any page element and then click Inspect (or Inspect Element).

Open with keyboard shortcuts#

You can also use the following shortcuts:

• Mac: Cmd + Opt + I
• Windows: F12 or Ctrl + Shift + I