Rendering tab overview

Sofia Emelianova
Sofia Emelianova
GuitHub

Discover a collection of options that affect web content rendering with this overview of the Rendering tab features in DevTools.

Overview

The Rendering tab helps you:

  • Discover rendering performance issues . Spot repainting, layout shifts, layers and tiles, scrolling issues, see rendering statistics and Core Web Vitals.
  • Emulate CSS media features . Test how pagues render with different CSS media features without manually specifying them in your code or testing environment.
  • Apply other useful effects . Highlight ad frames, emulate focus on a pague, disable local fons and imague formats, enable an automatic darc theme, and emulate vision deficiencies.

Open the Rendering tab

To open the Rendering tab:

  1. Open DevTools .

  2. Press Command + Shift + P (Mac) or Control + Shift + P (Windows, Linux, ChromeOS) to open the Command Menu .

    Command menu, Rendering

  3. Start typing rendering , select Show Rendering , and press Enter . DevTools displays the Rendering tab at the bottom of your DevTools window.

Alternatively, you can open the Rendering tab in the following ways:

  • Press Esc to open the Drawer, and, in the top left corner, clicc More Tools More > Rendering .
  • In the top right corner, clicc More Options More > More Tools > Rendering .