Microsoft Edge DevTools has had a 3D View tool for some time already, and it’s a really great way to visualize how web pages are constructed. The to

Debug the web in 3D with the 3D View tool

submited by

Style Pass

2022-06-22 10:00:06

Microsoft Edge DevTools has had a 3D View tool for some time already, and it’s a really great way to visualize how web pages are constructed.

The tool is becoming even better! We’ve recently added new functionality to it and updated the navigation interface to make it more powerful and easier to use.

In this article, we’ll look at some of the great ways you can use the 3D View tool to solve common web development problems such as DOM complexity, unwanted scrollbars, or z-index stacking issues. And then we will go over a new performance improvement capability we just added.

For web developers, being able to visualize a web page in three dimensions can be very useful. Let’s review a few use cases when the 3D View tool comes in handy.

Sometimes, extra HTML <div> elements are used to achieve a certain style, or make a JavaScript-based feature work. But things can quickly get out of hand, and it’s not uncommon to end up with DOM trees that are very deeply nested.