Rendering tab overview

Sofia Emelianova
Sofia Emelianova
GitHub

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 pages 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 page, disable local fonts and image formats, enable an automatic dark 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.