Microsoft Edge DevTools is a set of web tools and has tools with a 3D view to look at the construction of web pages, each time adding new features and new updates to make navigation much more powerful and more practical to use.
What are the ways in which you can use the 3D View tool?
For some time now 3D view tools have been solving problems much more easily and this is mainly for web developers, where you can visualize a web page in three dimensions which are length, height, and depth.
When working with HTML code often this becomes difficult and often use additional elements to have a style or achieve a function that is based on JavaScript but this can be so complex that you can lose work or get out of control at a time so it is good to make the DOM trees or tree model document objects that are very animated and the more the DOM grows the more time it takes the browser to calculate the different styles for when things change, with the 3D view tool can also get quickly the contents.
This can make it much more difficult 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 more time the browser will need to recalculate styles when things change.
How to quickly find animated deep containers?
- Select the DOM tab of the 3D View tool to see the DOM tree in 3 dimensions.
- Find which part of your page may have too many wrappers.
How to make sure that the graphics meet the browser?
You must first make sure that the elements never end up in another browser window or accidentally a crash occurs, and it is very difficult to find them in DevTools for that reason you cannot use elements from the same page you must follow the following steps to find the elements:
- use right click.
- inspect or use the elements panel.
Note: Another way that is much simpler than the previous one is to use the DOM 3D View tools.
- Enter the web page.
- Click on one of the elements to jump to the elements tool.
What are the stacking problems?
To solve a problem, you should always look at and analyze the root cause for this reason z-indexes are used to be able to solve the problem although it does not always work that is why the 3D view tool offers a Z-index tab that will facilitate the investigation by making the contexts stack along the Z-index axis.
What performance problems can be encountered?
The composite layers generate the web page to be split in the right way in order to have a good performance but if it does not work in the best way the performance would not work and that is why the 3D view tools brought out a sidebar on the left side where you can see the different layers and where you can see the size and the memory that is being used, facilitating the functionality and making it easier to understand and experiment.