Quickly spot out-of-viewport elements

Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.

Categories:

Supported by:

edge

Quickly spot out-of-viewport elements

Sometimes, either by accident or on purpose, HTML elements end up outside of the visible browser viewport. When they do, it can be really hard to find them in DevTools. Indeed, the DOM tree in the Elements tool is nice and all, but it's not super easy to navigate especially when it's huge and deeply nested.

Here's a nice tip to quickly find out-of-viewport elements, by using the 3D View tool in Edge DevTools:

Open DevTools in Microsoft Edge (press F12).
Open the 3D View tool by clicking the More tools (+) button in the toolbar at the top and choosing 3D View.
In the left sidebar, choose the DOM tab.
Zoom and pan the 3D scene to find out of viewport elements!

Edge DevTools showing the Elements tool at the top with the DOM tree and the 3D View tool at the bottom, showing a 3D render of the page, with most elements in the same rectangle, and 2 smaller elements outside of the main rectangle.

Quickly spot out-of-viewport elements

See also