Website designers and those of you interested in viewing and debugging web pages in 3D may be interested in a tool updated by Microsoft in the form of the aptly named 3D View tool. Microsoft Edge DevTools has had a 3D View tool for some time providing a great way to visualize how web pages are constructed in 3D. Microsoft has recently added new functionality to it as well as updating the user interface and making it more powerful and easier to use.
“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
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. This can make it much harder to work on the HTML code of your page, as well as debug it. But it can even have performance implications. The more the DOM tree grows, the longer the browser will need to re-calculate styles when things change.”
Debug 3D View tool
“The 3D View tool is a fast way to find these deeply nested containers. Select the DOM tab of the 3D View tool to see the DOM tree in 3 dimensions and discover which part of your page may have too many wrappers. Whether you’ve positioned an element there because you plan to transition it in the page later, or whether it was by accident, finding them in DevTools can prove quite hard. You can’t use the element picker to select them in the page, they’re just not reachable. Using right-click > inspect is also not an option in this case, and using the Elements panel to find them may be difficult.”
“There is a much faster way to do this by using the tool. The DOM tab of the tool gives you an overall view of the entire web page and allows to zoom out and pan around the scene until you find the elements that are out of the viewport. Click one of the elements to jump to the Elements tool.”
Source :
Latest Geeky Gadgets Deals
Disclosure: Some of our articles include affiliate links. If you buy something through one of these links, Geeky Gadgets may earn an affiliate commission. Learn about our Disclosure Policy.