Locating 3D View Tool

The tool is present in the developer tools window. To open the tool, follow these steps:

  • Step 1: In the Edge browser, visit the site where you want to use the tool. Then right-click anywhere on the page and click Inspect, or you can just press the shortcut keys “Ctrl+Shift+I” or “F12”. A section will appear containing various developer tools.
  • Step 2: In the top right corner, click the three vertical dots in the developer tools. A menu will appear in which you can select More Tools > 3D View. Alternatively, press the add button present after the console tab and then select 3D view from the list of options that appears.

Note: In the tool, you may get a message like “Some Microsoft DevTools components are missing…”. Actually, it’s related to a network problem. Check your connection, close the developer tools, and follow the steps again until the tool displays a 3D view.

Opening 3D view tool

3D View Tool in Microsoft Edge Browser

The 3D View Tool is used to get a 3D visualization of the site to check the different layers and z-index of the sites, which is not easy to debug. The tool provides very clean and colorful visuals and provides good movement controls around the 3D view. The various details, such as size and memory constraints, are also being displayed by the tool.

Similar Reads

Benefits of 3D View Tool

The tools provide an excellent way of viewing 3D elements on the page. Some of the benefits of 3D tools are:...

Locating 3D View Tool

The tool is present in the developer tools window. To open the tool, follow these steps:...

Using the 3D view Tool

You are provided various viewing options to view the 3D representation of the site. You also get three tabs with three different views targeting the layers, z-index, and DOM of the site. The tool is used only for viewing purposes to get information about layers and 3D elements that will be used for debugging. It does not provide any options to edit or change the DOM elements in any way....

Z-index tab

The tab provides the 3D view with respect to the z-index in the CSS used on the site. This tab also labels the z-index of elements. This tab is useful for developers working with z-index in CSS or any related web tech for debugging the issues related to z-index and also gives a good idea of all elements positioning with one another....

DOM tab

The tab provides a general 3D view where the z-index labels are not present; hence, in this view, the elements are stacked closely. This view is good for getting an overall view of the webpage, and it acts as a starting point for developers for viewing and debugging the site without going into specific details....

Conclusion

A site can be made up of various layers that are created by the browser to save up memory and minimize the continuous reloading of the page. The developers working on the site can use z-index for working with 3D elements. In each case, the developers have very little time to debug the code or make proper adjustments according to their needs. The 3D tool in Edge comes as a savior by providing a 3D view for the whole page and also elements outside the viewport. The developers are also provided with controls to move in the 3D space and various information about the 3D elements on the page....