Arboreal is a Firebug UI enhancement which adds a HTML sidepanel for DOM tree visualization.
Watch a screencast!
The algorithm to produce the tidy node-link tree layout is that of Christoph Buchheim, Michael Jünger and Sebastian Leipert from their research paper entitled 'Improving Walker's Algorithm to Run in Linear Time', Graph Drawing 2002.
- Seemlessly integrates into current version of Firebug (1.6 for Firefox 4)
- Visualizes DOM tree structure in HTML sidepanel
- Synchronizes with Firebug, especially its page inspector
- Has configurable DOM tree layout, e.g. you can
- hide DOM node element names in graph nodes to fit larger trees in panel
- change color schemes (HTML tag groups, DOM node tree depths, DOM tree leaf nodes,...)
- change the orientation of tree (top-to-bottom, left-to-right, right-to-left, bottom-to-top)
- extract and re-insert DOM node subtrees
- choose to expand or collapse DOM text, comment and iframe nodes
- Provides intuitive navigation in DOM tree visualization (by keyboard and mouse)
- Shows popups with element content preview
- Provides collapsed tree traversal, i.e. conditional subtree expansion
- Generates of AT&T GraphViz files for current DOM tree view
Other interesting Firebug extensions may be found here.
All comments are very welcome!
This page is part of the LegacyCollector website.
Disclaimer: All material on this site is property of their respective owners and available under
open licenses to the best of our knowledge. If you are an author and would like anything removed,
then please write an e-mail to legacy [at] collector dot org.