Inspect element without right clicking in Chrome

Question

When I inspect html/css on a website, I usually open the chrome developers panel ctrl+shift+I → right click context menu "inspect" so I can highlight that class

however, sometimes I'm trying to inspect an element that is sensitive to "right clicks" events , e.g. if I right click an item on the website functionality changes

Example:

so I can't inspect an element

Normally I inspect elements like this (e.g. stackoverflow)

How do you inspect an element without using the right click button?

Normally I would have to just dig through the chrome developer's panel elements and just go one by one to find said element, which takes a really long time

I must be missing something important here about chrome's inspect element tools. Could someone enlighten me here a better workflow / maybe chrome extension tools?

Solution 1

Try pressing ctrl+shift+c. This will open the dev tools in element selection mode, allowing you to left-click on elements to jump straight to them in the elements view.

Solution 2

You can press Ctrl+Shift+C to enter a mode where you can mouse over elements and it will inspect it. With your mouse over the element you want to inspect, just press Ctrl+Shift+C again and your element will be selected in the developer panel.

Solution 3

You can open the dev tools on a different windows and refresh your page or use firebug.

or use Firefox