Cache Visualization
Cacheviz is a developer tool that visually analyzes Drupal's render cache metadata directly on the page. It helps identify caching problems like uncacheable elements or cache bubble issues by highlighting elements with color-coded overlays and providing an interactive debug panel. This module should only be enabled on development or staging environments.
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
- Navigate to Administration → Configuration → Development → Cacheviz (/admin/config/development/cacheviz)
- Check "Enable Cacheviz" to activate the module
- Optionally enable "Auto-highlight problems on page load"
- Configure any paths you want to exclude from visualization
- Grant the "View Cacheviz debug information" permission to developer roles
- 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: