# DOM Graph Visualization - Quick Reference ## What is it? A debugging tool that visualizes the Document Object Model (DOM) tree of the currently loaded web page as a graph. ## How to use it? Press **Ctrl+Shift+D** while viewing any page in Bowser. ## What you get ### 1. Console Output ``` DOM TREE STRUCTURE: ====================

Text: 'Page Title'

Text: 'Page content...' ``` ### 2. New Browser Tab - Automatically opens with the visualization - Clean, dark-themed interface - Color legend explaining node colors - Interactive SVG graph (if Graphviz installed) - DOT format view with installation instructions (without Graphviz) ### 3. Graph File Saved to `~/.cache/bowser/dom_graph.svg` (or `.dot` without Graphviz) ## Node Colors | Color | Elements | |-------|----------| | 🟢 Light Green | ``, `` | | 🟡 Light Yellow | `

`, `

`, `

`, `

`, `

`, `
` | | ⚪ Light Gray | `
`, `

`, `` | | 🔵 Light Cyan | `