Various options in Rendering Tool

The tool provides various checkboxes and emulates options. All of these options can be separated into three sections: rendering checkboxes, emulating options, and image format checkboxes.

Rendering checkboxes

The various checkboxes under this section allow you to enable rendering information or layout inspection.

• Paint flashing: If checked, then any frame that is repainted, i.e., any changes in the elements, are highlighted in green.
• Layout Shift Regions: If checked, then any shifted layout is highlighted in blue.
• Layout borders: If checked, then the layer borders are displayed in orange and the tiles are displayed in cyan lines.
• Frame Rendering Stats: If checked, then in the top-left corner of the web page you get frame rate, GPU raster, and memory information.
• Scrolling performance issues: If checked, then in the web page elements get highlighted: yellow is for touch events, orange is for elements that repaint on scroll, lemon green is for mouse wheel events, and teal is for elements that slow down scrolling.
• Highlight ad frames: If checked, then any ads on the site are highlighted in red.
• Core Web Vitals: If checked, then in the top-right corner of the web page you get the largest contentful paint time, first input delay, and cumulative layout shift value.
• Disable local fonts: If checked, then any local fonts that are added to the src property under the @font-face rule in the CSS of the web page get disabled.
• Emulate a focused page: If checked, then the web page will stay focused even though you focus elsewhere.
• Enable automatic dark mode: If checked, then it sets the prefers-color-scheme media feature to dark.

Emulate options

The section includes various options to emulate CSS media features and visual deficiency.

• Emulate prefers-color-scheme: Use to set the prefers-color-scheme to dark or light if it is present in the media queries of the CSS in the web page.
• Emulate media type: You can set the media type to print or screen if it is present in the media queries of the CSS in the web page.
• Emulate forced colors: Activate the forced colors if they are present in the media queries of the CSS on the web page.
• Emulate prefers-contrast: You can set the prefers-contrast to more, less, or custom if it is present in the media queries of the CSS in the web page.
• Emulate prefers-reduced-motion: Set the prefers-reduced-motion to reduce if it is present in the media queries of the CSS in the web page.
• Emulate prefers-reduced-data: Set to reduce if it is present in the media queries of the CSS in the web page.
• Emulate prefers-reduced-transparency: Set prefers-reduced-transparency to reduce if it is present in the media queries of the CSS in the web page.
• Emulate color-gamut: Use the color-gamut to srg, p3, or rec202 if it is present in the media queries of the CSS on the web page.
• Emulate vision deficiencies: You can emulate visual deficiencies, which include blurred vision, reduced contrast, and various types of color blindness.

Image format checkboxes

This section just provides checkboxes to disable image format.

• Disable AVIF image format: If checked, then it disables the AVIF image format to cache in the browser, and don’t forget to reload the page for it to work.
• Disable WebP image format: If checked, then it disables WebP image format to cache in the browser, and don’t forget to reload the page for it to work.

The Rendering Tool provides various checkboxes and options to render the web page in different ways, which helps developers test the page for layout and design. You will also find various CSS options and various vision deficiencies that you can emulate using this tool.