Tweakpane Visual Debugger

Overview

Debug visual CSS and layout issues in the tweakpane-table plugin using Playwright browser automation. Measure actual element dimensions, compare DOM structures, inspect CSS properties, and identify root causes of alignment problems between table headers and data cells.

When to Use This Skill

Use this skill in these scenarios:

• Columns don't align between headers and data rows
• CSS changes don't produce expected visual results
• Need to verify actual rendered dimensions vs expected
• Investigating why width properties aren't being applied
• Comparing CSS properties between headers and rows
• User reports "still looks the same" after fixes

Debugging Workflow

Step 1: Navigate to Test Page