Sofia Emelianova

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

Highlight ad frames

To check if frames are tagged as ads:

1. Open theRendering tab on thisdemo and checkHighlight ad frames.
2. Observe the ad frame highlighted in red.

Emulate a focused page

If you switch focus from the page to DevTools, some overlay elements automatically hide if they are triggered by focus. For example, drop-down lists, menus, or date pickers. Thecheck_boxEmulate a focused page option lets you debug such an element as if it is in focus.

To emulate a focused page:

1. Open a page with the element to debug, for example, theYouTube website with its search bar.

2. On the page,open theRendering tab, then check and clearEmulate a focused page.

   

You can also findthe same option under the:hov button on the action bar inElements >Styles.

To discover more ways to freeze an element, seeFreeze screen and inspect disappearing elements.

Disable local fonts

Check if the local font alternatives work as expected by disablinglocal() 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

Emulate missinglocal() sources in@font-face rules:

1. Inspect the sentence above, openElements >Computed, scroll all the way down, and, underRendered Fonts, discover that Chrome foundCourier New in local files.

   

2. Open theRendering tab, checkDisable local fonts, andrefresh reload the page.

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

   

Enable automatic dark mode

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

Chrome 96 introduced anOrigin Trial forAuto 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 theRendering tab and checkEnable automatic dark mode.
2. Observe this page in dark mode.

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 withvision deficiencies see your site, so you can make it better for them. For more information, seeSimulating color vision deficiencies.

To emulate vision deficiencies:

1. Open theRendering tab.

2. UnderEmulate 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.

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 inAVIF andWebP 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 theRendering tab, checkDisable AVIF image format.
2. refresh Reload the page and hover over theimg src. The current image src (currentSrc) is now the fallback WebP image.

Similarly, you can disable WebP images.