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 and down arrow keys.To rotate the page horizontally, press the left arrow and right arrow keys.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)
