The large pane on the left works in two different modes. In Browser Mode you can surf the web using Safari's rendering engine. In Selection Mode, however, clicking into any part of the web page displayed will reveal the exact portion of the HTML and CSS sources that are responsible for the Contents and formatting of that part.
While Selection Mode is activated, the formatting box of the selected HTML element is highlighted using a semitransparent Overlay.
From hierarchical trees to flat code -- The HTML View
The Hierarchical View presents an HTML document as a Tree-like structure with the html element as its root. Using the arrow keys users can navigate within this tree structure and select any HTML element they want to Focus on.
The source code for selected elements is presented in the HTML Pane in a clear and highly customizable way unmatched by any other tool.
Instantly available and cascading -- The CSS view
A pop-up menu provides instant access to all style sheets underlying the given page, whether a sheet pertains to alternative media or has been imported using a filter hack.
In Cascade Mode all rules from associated style sheets that apply to the currently selected HTML element and its ancestors are shown in their proper order known as the CSS cascade.
Searching and Filtering
Both the HTML and the CSS Views feature advanced search capabilities. Besides a full-text search Selector Matching and Smart Groups can be used to quickly list all HTML elements or CSS rules that satisfy certain criteria.
