CODEWITHSUNDEEP
google-chromegoogle-chrome-devtools
Ethan
Ethan

Reputation: 60089

In the Chrome developer panel, is there a keyboard shortcut for the element selector?

In the Chrome developer panel, this tool...

enter image description here

lets you select elements and go directly to them in the DOM view, and see their CSS attributes.

Safari has the same tool.

Is there a keyboard shortcut to activate that tool (once you have the panel open)?

Upvotes: 67

Views: 56562

Answers (6)

Михаил Байраков
Михаил Байраков

Reputation: 11

Ctrl + Shift + C (Windows/Linux) or Command + Shift + C (Mac): This shortcut opens the Inspect Element mode and automatically selects the first element under your mouse cursor.

https://i.sstatic.net/7ORX1OeK.png

Upvotes: 1

Sabin
Sabin

Reputation: 777

On a Mac you can use ⌘ + ⌥ + I

This is what works for me.

Here's a resource where you can find all these shortcuts https://developers.google.com/web/tools/chrome-devtools/shortcuts

Upvotes: 2

Shreedhar
Shreedhar

Reputation: 5640

To open / switch from inspect element mode and browser window, you can do:

  • On Mac - ⌘ + Shift + C

  • On Windows / Linux - Ctrl + Shift + C OR F12

For more useful keyboard shortcuts, refer to the developer tools documentation.

Upvotes: 130

JohnGH
JohnGH

Reputation: 843

On Windows & Linux, to bring up the "Inspect element" pane at the bottom:

  • You can either use: Ctrl+Shift+C

  • OR you can use: F12

While you can usually right click elements in a web page and click Inspect element, it's useful to know these keyboard shortcuts for when a page has JavaScript to disable right-click in that page.

Upvotes: 2

Michael Cole
Michael Cole

Reputation: 16217

Ctrl + Shift + C for linux as well.

Upvotes: 4

amiregelz
amiregelz

Reputation: 1845

The shortcut is Ctrl+Shift+C (source).

You can also right click any element in a web page and click Inspect element.

Upvotes: 6

Related Questions