 Sofia Emelianova [GitHub](https://github.com/sofiayem)
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](https://developer.chrome.com/docs/devtools/rendering/performance.md.txt). Spot repainting, layout shifts, layers and tiles, scrolling issues, see rendering statistics and Core Web Vitals.
- [Emulate CSS media features](https://developer.chrome.com/docs/devtools/rendering/emulate-css.md.txt). Test how pages render with different CSS media features without manually specifying them in your code or testing environment.
- [Apply other useful effects](https://developer.chrome.com/docs/devtools/rendering/apply-effects.md.txt). 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](https://developer.chrome.com/docs/devtools/open.md.txt).
2. Press Command+Shift+P (Mac) or
Control+Shift+P (Windows, Linux, ChromeOS) to open the
**Command Menu**.
3. Start typing `rendering`, select **Show Rendering** , and press Enter.
DevTools displays the **Rendering** tab at the bottom of your DevTools window.
> [!IMPORTANT]
> **Key point:** In addition to opening the **Rendering** 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 the **Rendering** tab in the following ways:
- Press Esc to open the Drawer, and, in the top left corner, click **More Tools**  \> **Rendering**.
- In the top right corner, click **More Options**  \> **More Tools** \> **Rendering**.