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

In the Chrome developer panel, this tool...

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

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.

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

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

Ctrl + Shift + C for linux as well.

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.

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