14 DAY TRIAL // As part of its migration to Chromium, Microsoft has the opportunity to experiment with all kinds of features that could eventually make their way to the production build of the browser as well.
One recent addition to Microsoft Edge Dev and Canary builds is called 3D DOM Viewer, and it provides devs with an alternative method of using the DOM hierarchy in the browser.
Microsoft says its idea is based on Mozilla’s very own Tilt extension, which the company describes as “awesome” in a discussion of this latest Edge feature.
“This prototype for Dom 3D View is based on Tilt and offers a different way to visualize the DOM hierarchy. Instead of reading an xml tree like you would in the Elements tool you can see a graphical representation of the elements nesting,” a Microsoft Edge engineer explains on the linked page.
While the DOM 3D viewer is mostly supposed to be used for education and beginners who now make the first steps in the world of web development, the Microsoft engineer says this experiment currently comes with a series of limitations, as it follows:
| • Isolate an element and see its parent-children relationships |
| • Click on an element to focus its source code on the Elements panel |
| • Find areas of heavy nesting using the heatmap color option |
| • Find off-screen elements |
| • Use the mouse to zoom and pan to change the view perspective |
| • Use arrow keys to rotate the camera |
Note: the steps here work on both Windows and Mac, as long as the latest preview builds of Edge are installed.
First and foremost, you need to enable experimental developer tools in Microsoft Edge, and to do this, you’re going to fire up the flags screen by typing:
edge://flags
Developer Tool experiments
When loading the browser once again, launch the Developer tools by pressing the F12 key on your keyboard and then head over to the following location:
Microsoft Edge > Developer Tools > Settings > Experiments
Enable DOM 3D View
“The panel has a sidebar with controls and a main view with a canvas. It listens to the SDK.DOMModel.Events.DocumentUpdated to reset the view to blank. DOMSnapshot.getSnapshot is called to get the Dom model. The Dom model data is parsed and used to create a 3D scene with Babylon.js. The render engine displays the content to the canvas.”
For now, it’s important to keep in mind that Microsoft Edge is still in preview stage, so while this is just an experiment, there’s no guarantee it would make its way to the production version of the browser too. As I said before, Microsoft has remained tight-lipped on when it plans to finalize the work on Microsoft Edge, but rumor has it that the browser could be complete in the spring of 2020 when the company ships the 20H1 feature update.
