Cache Visualization

Cache Visualization (Cacheviz) is a developer tool that visually highlights and analyzes Drupal's render cache metadata directly on the page. It helps identify caching problems like uncacheable elements, per-user cache contexts, and cache bubbling issues.

Do not use on production sites

This module exposes internal cache metadata and should only be enabled on development or staging environments.

Key Benefits

• Instantly spot uncacheable elements killing your page performance
• Trace cache bubbling to find the root cause of problems
• Understand cache contexts and tags at a glance
• Debug without digging through code or Xdebug

Features

✔ Visual Element Highlighting

Color-coded overlays show cache status at a glance:

• Red: Uncacheable elements (max-age: 0)
• Orange: Per-user or session-based cache variations
• Purple: Time-limited cache
• Green: Permanently cacheable

✔ Interactive Debug Panel

A floating panel displays:

• Page-level cache metadata (tags, contexts, max-age)
• Statistics breakdown of all tracked elements
• Grouped issues by severity (critical, warning, info)
• Searchable element list with cache details

✔ Root Cause Analysis

For uncacheable elements, trace the "bubble chain" to find which child element is causing cache problems.

✔ Keyboard Shortcuts

Toggle panel (Ctrl+Shift+C) and highlights (Ctrl+Shift+H).

✔ Path Exclusions

Configure paths where visualization should be disabled (e.g., /admin/*).

✔ Permission-Based Access

Only users with the "View Cacheviz debug information" permission see the visualization.

Post-Installation

1. Navigate to Administration → Configuration → Development → Cacheviz (/admin/config/development/cacheviz)
2. Check "Enable Cacheviz" to activate the module
3. Optionally enable "Auto-highlight problems on page load"
4. Configure any paths you want to exclude from visualization
5. Grant the "View Cacheviz debug information" permission to developer roles
6. Visit any front-end page to see the Cacheviz panel in the bottom-right corner

The panel provides three views:

• Overview: Page cache status and element breakdown
• Issues: Grouped caching problems with locate/details actions
• Elements: Full list of tracked elements with search

Additional Requirements

• Drupal 10.4 or 11.x
• No additional modules required

Similar projects

• Renderviz - Provides similar render cache visualization with a different approach
• Devel - General development utilities that complement cache debugging
• WebProfiler - Symfony profiler integration showing detailed cache information in the toolbar

Supporting this Module

Contributions are welcome! Please use the issue queue to report bugs, request features, or submit patches.

Community Documentation

Understanding Drupal's cache system is essential for using this module effectively:

• Cacheability of render arrays
• Cache contexts
• Cache tags