Kayce Basques

Jecelyn Yeen

Sofia Emelianova

There are many ways to open Chrome DevTools. Choose your favorite way from this comprehensive reference.

You can access DevTools using Chrome UI or keyboard:

• Fromdrop-down menus in Chrome.
• With dedicatedshortcuts that openElements,Console, or the last panel you used.

Additionally, learn how toauto-open DevTools for every new tab.

Open DevTools from Chrome menus

If you prefer UI, you can access DevTools from drop-down menus in Chrome.

Open the Elements panel to inspect the DOM or CSS

To inspect, right-click an element on a page and selectInspect.

DevTools opens theElements panel and selects the element in the DOM tree. In theStyles tab, you can see CSS rules applied to the selected element.

Open the last panel you used from Chrome's main menu

To open the last DevTools panel, click themore_vert button to the right of the address bar and selectMore Tools >Developer Tools.

Alternatively, you can open the last panel with a shortcut. See the next section to learn more.

Open panels with shortcuts: Elements, Console, or your last panel

If you prefer keyboard, press a shortcut in Chrome depending on your operating system:

Here's an easy way to memorize the shortcuts:

• C stands for CSS.
• J for JavaScript.
• I designates your choice.

TheC shortcut opens theElements panel inink_selection inspector mode. This mode shows you helpful tooltips when you hover over elements on a page. You can also click any element to view its CSS in theElements >Styles tab.

For the full list of DevTools shortcuts, seeKeyboard shortcuts.

Auto-open DevTools on every new tab

Run Chrome from the command line and pass the--auto-open-devtools-for-tabs flag:

1. Quit any running Chrome instance.

   Key point: This flag works only for the first Chrome instance you open. If it doesn't work for you, for example, on Windows, make sure to end any residing Chrome processes from the Task Manager.

2. Run your favorite terminal or command line application.

3. Depending on your operating system, run the following command:

• macOS:

  open-a"Google Chrome"--args--auto-open-devtools-for-tabs

• Windows:

  startchrome--auto-open-devtools-for-tabs

• Linux:

  google-chrome--auto-open-devtools-for-tabs

DevTools will automatically open for every new tab until you close Chrome.

What's next?

For a more hands-on learning experience, seehow to customize DevTools.