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

L

6

67

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)?

Larue answered 6/8, 2012 at 17:38 Comment(0)

M

129

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.

Mccloud answered 6/8, 2012 at 17:42 Comment(5)

@SimpleCoder In fact, it is listed in the documentation, see developers.google.com/chrome-developer-tools/docs/shortcuts. – Sunsunbaked 6/8, 2012 at 17:45

I meant the Shortcuts panel under options. – Cioffred 6/8, 2012 at 17:47

That shortcut also works in linux version as well. – Genuflection 17/1, 2014 at 13:3

Maybe someone knows possibility to be able to inspect element right after pressing Ctrl + Shift + C? When Web developer tools are not shown and you press this shortcut, elements selector is not selected automatically - you must press it second time or even third. That seriously affects productivity if you are working on 4 tabs, changing them, opening and closing web developer tools.. It's annoying - I came from Opera developer tools and nothing was better for now. – Pazit 20/10, 2014 at 14:18

Ctrl + Shift + C is the better shortcut because it selects the element mouse-overed immediately. With F12 you need another mouse click. My gosh, this shortcut is such a time saver! – Checkers 20/7, 2016 at 14:17

S

6

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

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

Secor answered 6/8, 2012 at 17:44 Comment(0)

K

4

Ctrl + Shift + C for linux as well.

Kashgar answered 31/10, 2013 at 19:49 Comment(0)

U

2

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.

Unrelenting answered 25/10, 2013 at 12:28 Comment(0)

S

2

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

Spermatophore answered 25/8, 2017 at 6:33 Comment(2)

where did u find this? – Prokopyevsk 5/9, 2018 at 15:28

Can't remember where I did :) I've updated my answer with a link to shortcuts for different devices and operating systems. – Spermatophore 5/9, 2018 at 15:58

S

1

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

Sheepdog answered 27/5 at 12:49 Comment(0)

Recommended topics

Hot tags