Layers panel: Explore the layers of your website

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