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:
Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu.
Start typing
rendering, select Show Rendering, and press Enter. DevTools displays the Rendering tab at the bottom of your DevTools window.
emulate.
Alternatively, you can open the Rendering tab in the following ways:
![[Chrome for Developers]](https://www.gstatic.com/devrel-devsite/prod/v0f3a5b8b76e4a120372a69044e02756e703b6140f9f1812c6e4a0407b19864b7/chrome/images/lockup.svg){kind=link}
![[Sofia Emelianova]](https://web.dev/images/authors/sofiayem.jpg){kind=link}
![[Command menu, Rendering]](https://developer.chrome.com/static/docs/devtools/rendering/image/command-menu-rendering-77e23a5660851.png){kind=link}
![[More]](https://developer.chrome.com/static/docs/devtools/rendering/image/more-960651274fb95.png){kind=link}
![[More]](https://developer.chrome.com/static/docs/devtools/rendering/image/more-8d217ad0b24ee.png){kind=link}