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 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 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

Apply other effects: enable automatic dark theme, emulate focus, and more

Published on

Discover useful effects to apply to your page with this reference of the Rendering tab options.

Highlight ad frames

To check if frames are tagged as ads:

  1. Open the Rendering tab on this demo and check Highlight ad frames.
  2. Observe the ad frame highlighted in red.
Ad highlighted in red

Emulate a focused page

If you switch focus from the current page to DevTools, some overlay elements automatically hide if they are triggered by focus. For example, drop-down lists, menus, or date pickers.

  1. Open a page with the element to debug, for example, the YouTube website with its search bar.
  2. On the page, open the Rendering tab, then check and uncheck Emulate a focused page.
Emulate a focused page

Disable local fonts

Check if the local font alternatives work as expected by disabling local() sources in @font-face rules.

Often, developers and designers use two different copies of the same font during development:

  • A local font for your design tools, and
  • A web font for your code

Disabling local fonts makes it easier for you to:

  • Debug and measure web fonts loading performance and optimization
  • Verify correctness of your CSS @font-face rules
  • Discover any differences between web fonts and their local versions
Chrome renders this sentence in Courier New if it finds this font on your device.

Emulate missing local() sources in @font-face rules:

  1. Inspect the sentence above, open Elements > Computed, scroll all the way down, and, under Rendered Fonts, discover that Chrome found Courier New in local files.

    Rendered fonts: local
  2. Open the Rendering tab, check Disable local fonts, and refresh reload the page.

  3. Observe the sentence in Roboto found on the web.

    Rendered fonts: network resource

Enable automatic dark mode

See what your site can look like in dark mode even if you didn't implement it.

Chrome 96 introduced an Origin Trial for Auto Dark Theme on Android. With this feature, the browser applies an automatically generated dark theme to light themed sites if the user opted into dark themes in the operating system.

To enable automatic dark mode:

  1. On this page, open the Rendering tab and check Enable automatic dark mode.
  2. Observe this page in dark mode.
Automatic dark mode enabled
Important

With Auto Dark Theme enabled, the Emulate CSS media feature prefers-color-scheme drop-down list is disabled and set to prefers-color-scheme: dark automatically.

Emulate vision deficiencies

Everyone should be able to access and enjoy the web. Google is committed to making that a reality.

With Chrome DevTools, you can see how people with vision deficiencies see your site, so you can make it better for them. For more information, see Simulating color vision deficiencies.

To emulate vision deficiencies:

  1. Open the Rendering tab.

  2. Under Emulate vision deficiencies, select one of the following from the drop-down list:

    • No emulation.
    • Blurred vision.
    • Reduced contrast.
    • Protanopia (no red). Low perception of red; confusion of greens, reds, and yellows.
    • Deuteranopia (no green). Low perception of green; confusion of greens, reds, and yellows.
    • Tritanopia (no blue). Low perception of blue; confusion of greens and blues.
    • Achromatopsia (no color). Partial or total absence of color vision.
Selected Tritanopia (no blue).

Disable AVIF and WebP image formats

These emulations make it easier for developers to test different image loading scenarios without having to switch browsers.

Suppose you have the following HTML code to serve an image in AVIF and WebP formats for newer browsers, with a fallback PNG image for older browsers.

<picture>
<source srcset="test.avif" type="image/avif">
<source srcset="test.webp" type="image/webp">
<img src="test.png" alt="A test image">
</picture>

To disable all AVIF images on a page (or, similarly, WebP images):

  1. Open the Rendering tab, check Disable AVIF image format.
  2. refresh Reload the page and hover over the img src. The current image src (currentSrc) is now the fallback WebP image.
Emulate image types

Similarly, you can disable WebP images.

Important

These options disable image caching automatically.

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.