Layers panel: Explore the layers of your website Stay organized with collections Save and categorize content based on your preferences.

[Dale St. Marthe]

Dale St. Marthe

LinkedIn

The Layers panel helps you understand the composition of your website and how the browser renders content. Analyze a 3D diagram of your website to identify rendering issues, fix scrolling bugs, and optimize animations.

Overview

Use the Layers panel to do the following:

• View document layers.
• Inspect document layers.
• Set DOM change breakpoints.
• View Paint Profiler information.
• Identify slow scrolling elements.

Open the Layers panel

To open the Layers panel, follow these steps:

1. Open DevTools.
2. Open the Command menu by pressing:
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P [Command Menu with ]
3. Start typing Layers, select Show Layers panel, and press Enter.

Alternatively, in the top right corner, select more_vert More options > More tools > Layers panel.

Additionally, the Performance panel lets you view the layers of each frame of a recording in a Layers tab. To learn more, see View layers information.

View document layers

The left-most section of the Layers panel lists all rendered layers of the document in an expandable tree. This tree updates as you navigate the page. Layers are identified either by their CSS selector or with a number, followed by the dimensions of the layer in pixels.

[The layer tree.]

Hover over a layer to highlight it on the web page and in the diagram. A tooltip will appear on the page with the following information:

• The selectors of the layer.
• The layer's dimensions, in pixels.
• An icon representing CSS grid or flex, where relevant.

[Tooltip on web.dev banner.]

Inspect document layers

Click a layer to view more information in the Details pane.

[The Details tab.]

Depending on the layer, the following information will appear:

• Size
• Compositing Reasons
• Memory estimate
• Paint count
• Slow scroll regions
• Sticky position constraint

The diagram shows how layers are stacked and arranged for this page, including elements that are positioned outside of the viewport.

[The Layers panel diagram.]

To move the diagram:

• Use WASD to move the diagram. Press W to pan up, A to pan left, S to pan down, and Dto pan right.
• Click Pan Mode drag_pan or press X and drag to move along the X and Y axes.
• Click Rotate Mode 360 or press V and drag to rotate along the Z axis.
• Click Reset Transform zoom_in_map or press 0 to reset the diagram to its original position.
• Zoom in by pressing shift + + or mousewheel up.
• Zoom out by pressing shift + - or mousewheel down.

To see a layers corresponding DOM element in the Elements panel, right-click a layer in the diagram or on the layer tree and click Reveal in the Elements panel.

Additionally, the Layers panel hides certain layers that don't host or draw content. To show these layers, right-click on the layer tree and select Show internal layers.

Set DOM change breakpoints

The Layers panel lets you set DOM change breakpoints.

To set a DOM change breakpoint, follow these steps:

1. Right-click a layer in the layer tree.
2. Hover over Break on then select Subtree modifications, Attribute modifications, or Node removal.

Find a list of DOM change breakpoints in:

• Elements > DOM Breakpoints tab.
• Sources > DOM Breakpoints collapsable section.

[Breakpoints listed in Sources and Elements panels.]

To learn more about the types of breakpoints, see Types of DOM change breakpoints.

View Paint Profiler information

The Layers panel lets you view detailed paint information about a layer, and render the content of the webpage onto the 3D diagram.

To activate the Paint Profiler, follow these steps:

1. Check the check_box Paints checkbox in the action bar.
2. Select a layer from the layer tree.
3. Click Paint Profiler at the bottom of the Details pane. Note that not all layers will have this option.

The Profiler tab will open with paint records and a histogram that represents paint cost distribution.

[The Profiler tab.]

Activating Paints will also render most of the content of the webpage onto the diagram.

Identify slow scrolling elements

Some websites use JavaScript to detect scroll or touch events on elements in a way that may negatively affect scrolling speeds. To identify layers that contain event listeners related to scrolling that may hinder performance, click the check_box Slow scroll rects checkbox.

[A slow scroll layer in diagram.]

Layers that may cause slow scrolling are highlighted in pink.