Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog

Open Chrome DevTools

Published on Updated on

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:

Additionally, learn how to auto-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 select Inspect.

The Inspect option in a drop-down menu in Chrome.

DevTools opens the Elements panel and selects the element in the DOM tree. In the Styles pane, you can see CSS rules applied to the selected element.

An element selected in the Elements panel.

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

To open the last DevTools panel, click the Three-dot menu. button to the right of the address bar and select More Tools > Developer Tools.

The Developer Tools option selected from the three-dot menu.

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:

OSElementsConsoleYour last panel
Windows or LinuxCtrl + Shift + CCtrl + Shift + JF12
Ctrl + Shift + I
MacCmd + Option + CCmd + Option + JFn + F12
Cmd + Option + I

Here's an easy way to memorize the shortcuts:

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

The C shortcut opens the Elements panel in Inspect. 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 the Elements > Styles pane.

The Elements panel in inspector mode with a tooltip.

For the full list of DevTools shortcuts, see Keyboard 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.

    Important

    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:

    start chrome --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?

Success

Congratulations! You've successfully unlocked the power of Chrome DevTools.

Next, watch the following video to learn some useful shortcuts and settings for quicker DevTools navigation.

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

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.