Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
Select elements with pointer-events:none by holding Shift
When selecting elements from the page they normally get highlighted on hover and selected on click. However certain elements can't be selected.
Indeed, if an element does not react to pointer events because the
pointer-events:none CSS declaration is set, then you just can't select it, and the only way to get to it is to find it in the Elements/Inspector panel.
In Chrome, Edge, Polypane and Firefox, you can hold the Shift key on your keyboard while hovering elements in the page! When you do this, even elements with
pointer-events:none can be selected!
Šime Vidas also proposed this alternative solution in Firefox:
- Open the Accessibility tool.
- Use the accessibility picker tool (top-left corner) to pick the element from the page.
- Find the corresponding DOM node in the Properties sidebar panel, and click the inspect icon next to it.