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.
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:
- Clean and Colorful 3D View: The tool provides a clean UI for the developers, and the elements in the 3D view are accordingly color-coded. You also have the option to change the perspective of the 3D view according to your needs.
- Multiple Views: You get a total of 3 views that are separated into three tabs: Composite Layers, Z-Index, and DOM. This targets different issues faced by developers while working with 3D elements and layers of a site.
- Visualizing Individual Elements: You can isolate any element from the 3D view that you want to focus more on and debug it individually. The selected element and only its parents or children are displayed in the 3D view.
- Feedback: The tool also provides a list of composited layers, and when you select an element in any layer, some details are also provided, such as size, composition reasons, memory estimate, and many more.
- Movement controls: You have options to change the perspective of the 3D view of the page and get various movement controls present in the bottom right corner of the 3D view tool.
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
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.
Special Options
The tools provide buttons that are used for movement and changing the perspective in the 3D scene for easy viewing and also allow isolating elements, including parents and children, from that isolated element. Let’s move from left to right and understand the various options shown below:
Some Options in 3D tool
- Retake snapshot: The option is present only in the Z-index and DOM tabs. These two tabs work by taking snapshots of the webpage instead of showing a live view of the page. You can press this button to retake a snapshot.
- Reset View: If you get lost in the 3D view and at any time want to reset the view, press this button to reset the perspective of the view to its default position.
- Pan View: By selecting this button, you canmove the 3D view horizontally and vertically. After selecting the button, you can use your mouse to move the page accordingly.
- Rotate View: By selecting this button, you can rotate the 3D view. After selecting the button, you can use your mouse to rotate the page accordingly.
- Isolate the selected element: Present in the Z-index and DOM tabs. You can select an element and isolate it. The tool removes the whole page from the 3D view and displays only that particular element. If you check the include parents and/or include children checkbox, then the isolated 3D view will also display parents and children elements of the isolated elements. In the Z-index tab, you don’t get the option to include children’s elements for isolation.
Movement Controls
- Movement controls: We also get additional movement buttons, which provide a slider to zoom or move horizontally and vertically.
Shortcut Keys: Use only arrow keys for rotation around the 3D view. Hold the Ctrl key along with the arrow keys to move horizontally and vertically around the 3D view.
Composited Layers tab
The tab provides the 3D view with respect to various layers created by the browser rendering engine for the webpage. This tab also displays a list of layers and various details of a selected element in any layer. This tab is good for developers to check on the various memory usages and list of various layers created by the browser to increase performance.
The various components of the Composited Layers tab are:
- Slow scroll rects: If checked, then the 3D view highlights the slow scrolling section in pink, which can cause issues due to adding scrolling behavior in JS.
- Paints: If checked, it displays the exact webpage; otherwise, the 3D view only contains elements in rectangles.
- Layers Tree: Provides a tree view of all composited layers on the webpage. Clicking on a layer in the 3D view highlights the corresponding layer in the Layers Tree view.
-
Details Pane: This is a section that displays the details of a selected layer. The details displayed are as follows:
- Size: This displays the resolution of the selected element and its position with respect to the viewport.
- Composing Reasons: This displays the reason why the selected layer is rendered as a separate layer but not a part of the webpage base layer.
- Memory estimate: the total memory consumed by the selected layer.
- Paint count: displays the number of times the layer is being repainted by the browser. Animations and interactable elements are rendered in separate layers because, for better performance, it is better to repaint the particular layer when required instead of the whole page.
- Slow scroll regions: This displays resolution and position with respect to the viewport of the touch events or scroll events handler that is present in the selected element.
- Sticky position constraint: If an element is positioned sticky, then it displays the top, bottom, left, and right constraints of the position of the element.
Composited Layers Tab
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.
The various components of the Z-index tab are:
-
Show element type: The section provides two radio buttons. Show all and Show only stacking contexts, and a checkbox for Show z-index labels.
- Show all: If you select the Show All button, the 3D view will contain all elements of the page.
- Show only stacking contexts: If you select the Show only stacking contexts button, then the 3D view will only contain these elements that have a z-index value, thus removing all the elements of the page that are not part of the stacking context and giving you a clean view.
- Show z-index labels: If checked, the 3D view displays the z-index of elements.
-
Color type: This section provides two radio buttons:
- Purple to White: If selected, then a 3D view is displayed with colors starting from purple to white with respect to the stacking context.
- Use background color: If selected, then a 3D view is displayed with colors of the element’s original background color.
Z-index Tab
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.
The various components of the DOM tab are:
- Nesting level for page: It is a slider used to select the number of nested layers of the webpage to be displayed in the 3D view. The higher the value, the more deeply nested the layers are in the webpage. Below this slider, we have a reset button, which resets the slider to its default value.
-
Color type: This section provide radio buttons used for selecting the colors used by the 3D view.
- Purple to White: If selected then 3D view is displayed with colors starting from purple to white with respect to the stacking context.
- Blue to Yellow: If selected then 3D view is displayed with colors starting from blue to yellow with respect to the stacking context.
- Rainbow: If selected then 3D view is displayed with colors of rainbow which are red, orange, yellow, green, blue, indigo, violet with respect to the stacking context.
- Use screen texture: If selected then 3D view displays exact webpage look of the elements.
- Use background color: If selected then 3D view is displayed with colors of the element’s original background color.
DOM Tab
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.