# DOM Visualization Feature ## Overview The DOM visualization feature allows you to inspect the Document Object Model (DOM) tree of the currently loaded page as a graph. This is useful for debugging, understanding page structure, and learning how browsers parse HTML. ## Usage ### Keyboard Shortcut Press **Ctrl+Shift+D** while viewing any page to generate a DOM graph. ### What Happens 1. **Console Output**: The DOM tree structure is printed to the console in text format 2. **Graph File**: A graph file is generated in `~/.cache/bowser/` 3. **New Browser Tab**: Opens automatically displaying the visualization - Shows interactive SVG graph (if Graphviz installed) - Shows DOT format with installation instructions (if Graphviz not installed) ### Graph Features - **Color-Coded Nodes**: Different element types have different colors - Light green: ``, `` - Light yellow: Headings (`

`, `

`, etc.) - Light gray: Block elements (`
`, `

`, ``) - Light cyan: Lists (`