Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS Developer Resources: View and manually load source maps CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS Developer Resources: View and manually load source maps CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog

Rendering tab overview

Published on

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.

    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.

Important

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 More > Rendering.
  • In the top right corner, click More Options More > More Tools > Rendering.

Published on Improve article

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.