The Show z-index labels checkbox shows or hides the z-index labels in the 3D canvas. This view removes elements that don't participate in a stacking context, and flattens the DOM to produce easier navigation in the 3D canvas. The Show only stacking contexts radio button only shows the page elements which are relevant to z-index stacking. This view is the quickest way to display all the page elements after changing the other 3D display settings. The Show all radio button shows all elements of the page. The Show Elements type section in the Z-index tab controls which elements of the page are shown in the 3D canvas. The Z-index tab contains some of the same features as the DOM tab, but adds z-index labels on the 3D canvas.įor background information, see MDN > CSS Reference > z-index. How many times the selected layer was painted by the rendering engine. The memory consumed for the selected layer.
For example: "Secondary layer, to house contents that can be scrolled." Memory estimate Reasons why the browser rendering engine created the layer. The width and then the height of the selected composited layer, along with the location of the upper left of the layer relative to the upper left of the page viewport. Click on a layer to review detailed information about it in the Details info pane. Layers expander treeĮxpand this tree to display the list of composited layers. Renders the content from the webpage (color or image file) onto the elements. Both checkboxes are based on the same debugging info, but these two tools present this information differently. See Find scroll performance issues in realtime in Performance features reference. This checkbox is similar to the Scrolling performance issues checkbox in the Rendering tool, which highlights the slow rects on the page directly (in yellow). This checkbox highlights (in pink) the boxes of the rendered webpage that may cause these performance issues. Certain webpages use JavaScript to detect scroll (or touch) on certain page elements in a way that may make scrolling through the webpage slower than it normally could be.
This checkbox is helpful to investigate performance problems. The Slow scroll rects checkbox highlights sections of the page that cause slow scrolling. In the Composited Layers tab, the layers tree expands automatically, and the Details tab below the layers tree shows information about the selected layer. On the 3D canvas on the right, select an element of the webpage. Use the Composited Layers view to analyze how many layers are created by your CSS code, how big they are, and how often they change. In the Composited Layers view, the 3D canvas displays the list of layers created by the browser rendering engine for the webpage. The keys rotate the page, regardless of whether the Pan view or Rotate view button is selected in the toolbar.įor more information, see these other sections in this page: To rotate the page vertically, press the Up Arrow or Down Arrow key.To rotate the page horizontally, press the Left Arrow or Right Arrow key.To rotate the page by using the keyboard, click in the 3D canvas to put focus on it so that a black border appears, and then press the arrow keys. To rotate the page by using the mouse, click the Rotate view ( ) button and then drag the page on the 3D canvas in the desired angle with your mouse. To shift the page left, right, up, or down, click the Pan view ( ) button and then drag the page on the 3D canvas in the desired direction with your mouse. To zoom the webpage in or out on the 3D canvas, use the mouse scroll wheel, or use the slider in the lower right. Zoom, pan, and rotate the 3D canvas Zoom the page in or out On the right, the 3D canvas represents the webpage according to which tab and options you select.
Explore all the elements of the webpage, translated into a 3D perspective. Explore the DOM as a whole, with all of the elements easily accessible. Use this tab, or view, to debug the webpage based on the z-index stacking context. Explore the elements of the webpage, with an emphasis on the z-index layer context. The Composited Layers tab shows a realistic rendering of the webpage, including images, for a comprehensive experience as you move the page around in 3D space.On the left, the 3D View tool has 3 tabs: 3D visualization helps you understand the DOM hierarchy for your webpage in terms of z-index layers. Use the 3D View tool to debug your web app by rotating your page in 3D space to get a perspective on your webpage, represented as layers.
0 kommentar(er)
