Browser DevTools Rendering Panel

Browser DevTools Rendering Panel: Interactive Practice

This interactive workshop helps you practice using Browser DevTools' Rendering panel, which is essential for diagnosing and fixing visual and performance problems. Each section demonstrates a specific feature.

Getting Started:

Open Browser DevTools with F12 or Ctrl+Shift+I (Cmd+Option+I on Mac)
Navigate to More tools → Rendering from the three-dot menu in DevTools
Try each feature below one at a time to observe its effect
Use the checkboxes and dropdown options in the Rendering panel to enable/disable features

1. Paint Flashing

Highlights areas of the page that need to be repainted when changes occur. Repainting can be expensive for performance.

Click me to change color and observe paint flashing

Try it: Enable Paint flashing in the Rendering panel, then click the box to see which areas get repainted. Green highlights indicate areas being repainted.

2. Layout Shift Regions

Highlights elements that shifted during layout changes, helping identify Cumulative Layout Shift (CLS) issues. CLS is an important Core Web Vital that affects user experience and SEO.

This box will change size and cause layout shifts

Try it: Enable Layout Shift Regions, then click the button to see highlighted regions. Blue highlights show where elements have moved from, and orange shows where they moved to.

3. Frame Rendering Stats

Shows real-time FPS (frames per second) metrics during interactions. Aim for 60 FPS for smooth animations.

Hover over me to trigger animation

Try it: Enable Frame Rendering Stats and hover over the box to see performance metrics. The overlay shows FPS, GPU memory usage, and frame timing data.

4. Layer Borders

Visualizes compositing layers with colored borders to identify unnecessary layers, which can consume memory.

I have transform: translateZ(0) which forces a new compositing layer

Try it: Enable Layer borders to see this element's compositing layer. Orange borders indicate layers that were created for specific reasons (transforms, opacity, etc.).

5. Scrolling Performance Issues

Identifies elements that might cause performance issues when scrolling.

Scroll me to check for performance issues. This content has various CSS properties that might trigger warnings.

I'm sticky!

More content to enable scrolling. Sticky elements and complex layouts can impact scrolling performance.

Even more content to allow scrolling...

The Rendering panel will highlight issues like touch and wheel event handlers that might block scrolling.

It also identifies non-composited scrolling elements, which can be less performant.

Final content to allow more scrolling...

Try it: Enable Scrolling performance issues and scroll the container. Elements with potential issues will be highlighted with a warning explanation.

6. CSS Media Type Emulation

Test how your page looks with different media types without actually changing the output method.

This text changes style based on media type (print vs. screen)

Try it: In the Rendering panel, set Emulate CSS media type to "print" to see how this section would appear when printed. This helps test print stylesheets without actually printing.

7. Emulate CSS media feature prefers-color-scheme

Test your dark mode implementation without changing system settings.

I respond to dark mode! My styling changes based on color scheme preference.

Try it: Set Emulate CSS media feature prefers-color-scheme to "dark" or "light". This allows testing color schemes without changing your operating system settings.

8. Emulate CSS media feature prefers-reduced-motion

Test how your animations appear for users who prefer reduced motion. This is an important accessibility consideration.

I animate!

Try it: Set Emulate CSS media feature prefers-reduced-motion to "reduce". Notice how the animation changes or stops to accommodate users who may experience motion sickness or distractions from animations.

9. Emulate vision deficiencies

See how your page appears to users with different vision deficiencies to ensure accessibility.

Red

Green

Blue

Yellow

Try it: Try different options under Emulate vision deficiencies like Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), or Achromatopsia (complete color blindness). This helps ensure your color choices are accessible to all users.

10. Disable local fonts

Test how your page looks when local fonts can't be used, helping identify font fallback issues.

This text uses Arial as the primary font

This text uses system fonts

Try it: Enable Disable local fonts to see how text appears with fallback fonts. This helps test font stacks and ensure content remains readable if primary fonts aren't available.

11. Emulate focused page

Test how your page behaves when it doesn't have focus. Some animations or timers might pause when a page loses focus.

This element might behave differently when the page doesn't have focus.

Try it: Toggle Emulate a focused page off to simulate how the page behaves when it's not the active tab. This helps test background behavior of web applications.

12. Emulate CSS Container Queries

Test responsive designs that use container queries. Container queries let elements adapt based on their parent container's size rather than the viewport.

Resize this container ↔️ (drag the bottom-right corner)

Item 1

Item 2

Try it: Resize the container horizontally to see how the layout changes when it crosses the 400px threshold. In the Rendering panel, try the Container Queries debugging tools to see the containers and container query breakpoints.

13. Enable CSS Grid/Flexbox debugging

Visualize CSS Grid and Flexbox layouts to better understand and debug complex layouts.

Grid Item 1

Grid Item 2

Grid Item 3

Flex Item 1

Flex Item 2

Flex Item 3

Try it: In DevTools Elements panel, select a grid or flex container and look for the badge that says "grid" or "flex". Click it to see the layout overlay. From the Rendering panel, you can also enable persistent overlay features.

14. Contrast issues

Identify elements with poor color contrast that could cause accessibility issues.

This text has low contrast and may be difficult to read for some users.

This text has good contrast and is readable.

Try it: Enable Highlight contrast issues in the Rendering panel to see elements flagged for poor color contrast. This helps identify accessibility issues for users with visual impairments.

15. Expensive Paint Operations

Identify and debug operations that cause expensive repaints, which can slow down your page.

Click the button to generate many elements at once

Try it: Enable Paint flashing AND Frame Rendering Stats, then click the button. Watch for frame rate drops and large green overlay areas indicating heavy paint operations.

16. Slow DOM operations

Identify elements that trigger expensive DOM operations and layout thrashing.

Click me to trigger expensive layout calculations (layout thrashing)

Try it: Open the Performance panel alongside the Rendering panel. Start recording, click the element above, and stop recording. Look for long tasks in the performance timeline related to layout recalculation.

Pro Tips for DevTools Rendering Panel:

Combine tools: Use Paint flashing with FPS meter to identify expensive repaints that hurt performance
Core Web Vitals: Use Layout Shift Regions to identify and fix CLS issues that affect your site's SEO
Performance auditing: Use the FPS meter during scrolling and animations to ensure smooth 60fps experiences
Accessibility: Always test with vision deficiencies and reduced motion settings to ensure your site is usable by everyone
Memory usage: Check layer borders to identify unnecessary compositing layers that might consume excess GPU memory
Mobile testing: Combine the Rendering panel with Device Mode to debug mobile-specific rendering issues
Print debugging: Use media type emulation to test print stylesheets without wasting paper
Animation issues: Look for "non-composited animations" warnings to identify animations that don't use the GPU