Rendering tab overview

Sofia Emelianova
Sofia Emelianova

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

Overview

TheRendering 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 theRendering tab:

  1. Open DevTools.

  2. PressCommand+Shift+P (Mac) orControl+Shift+P (Windows, Linux, ChromeOS) to open theCommand Menu.

    Command menu, Rendering

  3. Start typingrendering, selectShow Rendering, and pressEnter.DevTools displays theRendering tab at the bottom of your DevTools window.

Key point: In addition to opening theRendering tab, you can also use the Command menu to search for and enable any option. Try typing an option name, for example,emulate.

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

  • PressEsc to open the Drawer, and, in the top left corner, clickMore ToolsMore >Rendering.
  • In the top right corner, clickMore OptionsMore >More Tools >Rendering.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2022-04-13 UTC.