Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inspect element without right clicking in Chrome

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?

like image 718
Vincent Tang Avatar asked Jun 17 '17 14:06

Vincent Tang


People also ask

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

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.

How to Inspect Element in the Chrome browser?

Listed below are the steps to inspect element in the Chrome browser: Launch Chrome and navigate to the desired web page that needs to be inspected. (Let’s consider BrowerStack’s home page in this example)

How to inspect a web page in Chrome using browerstack?

Launch Chrome and navigate to the desired web page that needs to be inspected. (Let’s consider BrowerStack’s home page in this example) From the drop-down menu, click on More tools -> Developer Tools macOS users can use the shortcut – command + option + C and Windows users can use Control + Shift + C.

How to hide an element in Google Chrome using CSS?

Open Google Chrome and go to a website. Here, we use hostinger.com. Right-click on any part of the web page and select Inspect. Enable the Inspect feature and click on the element you want to hide. Right-click on the code highlighted on the DOM tree and select Hide Element. A new visibility property will appear on the CSS panel.


1 Answers

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.

like image 161
Bobby Speirs Avatar answered Sep 26 '22 16:09

Bobby Speirs