{"version":"1.0","type":"rich","title":"CSS Layout Debugger","description":"This tool visualizes CSS layouts by outlining every DOM element on a page with a random valid hex color, making element boundaries and nesting immediately visible. The code queries the document with `document.querySelectorAll(\"*\")` or the `$$` shortcut, then iterates over the NodeList to set each element’s `outline` style property. It generates colors using `Math.random()` and bitwise operations, converting the result to a base-16 string. A second version assigns a hue based on the tag name’s length, grouping similar elements visually.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-88489d3447857f50b93f?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}