7

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: enter image description here

so I can't inspect an element

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

enter image description here

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?

Vincent Tang
  • 3,758
  • 6
  • 45
  • 63

3 Answers3

5

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.

Bobby Speirs
  • 667
  • 2
  • 7
  • 14
3

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.

mx0
  • 6,445
  • 12
  • 49
  • 54
Pazzaz
  • 157
  • 1
  • 4
1

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

or use Firefox

Jonathan
  • 2,700
  • 4
  • 23
  • 41
  • what do you mean by opening dev tools on a different window though? i thought the devtools has to be on the same page as what your inspecting? – Vincent Tang Jun 17 '17 at 14:36
  • 1
    no, you can undock it to separate window. open it, click on the 3 dots next to the closing cross on the top right of the dev tools, and undock it. explained here https://stackoverflow.com/questions/20220090/undock-chrome-developer-tools – Jonathan Jun 17 '17 at 14:39
  • is each window equivalent to one website you are viewing? (when docked) – Vincent Tang Jun 17 '17 at 14:44
  • 1
    it's linked to the one you are inspecting – Jonathan Jun 17 '17 at 14:44