Debug
View UI renders at different responsive breakpoints
Features
Responsive Testing
View UI at mobile, square, and wide resolutions
Visual Documentation
Pre-rendered screenshots for all pages
Fast Preview
Instantly browse UI without running the app
Local Storage
All renders stored locally in your project
Technical Details
The Debug tool displays PNG renders of all UI pages at three official responsive breakpoints: Mobile (412×915), Square Desktop (960×987), and Wide Desktop (1920×867). These resolutions represent common use cases for mobile devices, half-screen desktop usage, and full-width desktop displays.
Renders are stored in resolution-specific directories under tools/debug-renders/ and are pre-generated using Playwright. The tool displays these renders in a responsive photo gallery, allowing quick visual review across different viewport sizes.