DDT

(Dynamic DOM Tools)

DDT is not an insecticide, but it may help debugging web pages ;)

DDT (Dynamic DOM Tools) was designed for parsing the DOM tree and CSS information of a web page. Using DDT, you can filter the CSS and DOM information, as well as edit the styles dynamically (on basis of classes, id's and element nodes) and see the results immediately.

DDT will show the document tree of the recent document. On demand, you can filter according to some criterias and inspect the css statements also.

CSS

If the ddt checkbox has been checked (see below), the parser parses the style information. For each stylesheet, it shows the link (clicking on it, you see the source file), and then the style information is it has been stored in the dom tree.
A tickmark in front of the style's selector text shows that the selector is used in the document, a small red 'x' shows that it is not used.
Clicking the 'pencil' sign behind the selector text opens the edit-box for the selector to edit the style.
Clicking on the 'waste basket' symbol, the style will be deleted from the document, so the developer can inspect what happens with this page without that style. Another symbol (a small green arrow) appears to restore the style immediately.

Nodes

The DDT parser parses the DOM tree recursively and writes the information as a hierarchical tree. Depending on the filters (see 'checkboxes' below), the following information will be shown:
Selectors: Displays the 'styles' array for each DOM node. Clicking the magnifying glass symbol behind that will scroll to the css style definition, in order to inspect or edit it. A blue double-arrow symbol will appear here for jumping back to the node definition.
If the "Recursive" box has been selected, the inherited styles of each node will be displayed also.
Attributes: Show attributes as stored in the node's attribute array.
Hierarchy: Shows the tags, classes and id's in the node hierarchy.
Computed styles: Useful to see how the browser interpretes the styles.
Inline styles: Show styles which are defined inside the tag with the 'style' attribute
Textnodes: Display the text of the text nodes.
default styles: If checked, the style defaults of the browser will be displayed also (only in connection with the 'Selectors').

Start Parsing

DDT starts parsing the current document when it has been launched. Pressing the 'ok' button, DDT will reparse the document, according to the filters.
Setting a delay in the appropriate text field, the parsing will wait for a number of seconds till it starts. This is especially useful if you want to test the document's behavior with some mouseover actions or something like this.

Filters

There are several possibilities for filtering the information

Buttons:

Expand: Expand all element information of the DOM tree.
Collapse: Collapse all element information of the DOM tree.
Relevant: Expand all relevant elements according to filtering
Mouseover: After clicking this button, you may move the mouse above the document and the ddt window scrolls to the corresponding elements in the dom tree.
When you press the 'Escape' key, the element will be selected and the 'mouseover'-mechanism stops. Pressing the 'p'-key will select the currently selected element's parent node.
SplitStyles: Sometimes style selectors are grouped together, e.g. 'div, span' will work both on div and span elements. Clicking the 'SplitStyles' button will seperate those into single style selectors, in order to inspect which ones are used and also to check changes for certain selectors on the fly.

Check Boxes:

All informations mentioned above can be selected to be displayed or not with the check boxes. On checking or unchecking a checkbox, the change will have an effect after re-parsing the document.

Filter with regular expressions

The cssText attributes for each tag and also the cssStyles will be parsed, using regular expressions. Some characters have special meanings:

what	example	means:
^	^table	finds "table" at the beginning of the search string
$	}$	finds "}" at the end of the search string
*	blu*	finds "bl", "blu", "bluu", "bluuu",... - last charakter before the asterisk may be repeatet 0 or more times
*	blu+	finds "blu", "bluu", "bluuu",..., but not "bl" - last charakter before the asterisk may be repeatet 1 or more times
.	.able	finds "table", "gable", "mable" - means any charakter at this place.
.	.+able	finds "table", "stable", "unstable" - one or more (at least one) of any charakter at this place.
.	.*able	finds "able", "table", "stable", "unstable" - zero or more of any charakter at this place.
`\b`	`\table\b`	finds the word "able", but not "table" \b means word boundary
`\B`	`\Bable`	finds "table", "stable" etc., but not "able" - \B means no word boundary
`\d`	`\d+`	finds any number \d means a digit
`\D`	`\D.+`	finds "rd" in "3rd" \D means not a digit
`\s`	`tr\std`	finds "tr td" \s means whitespace

Show or hide

Hide the used or unused css-elements by clicking the appropriate checkboxes. Both "Selectors" and "CSS" has to be selected for this function.
Checking the 'invisible' will hide all invisible elements (elements with a 'visibility:hidden' or 'display:none' style.

Edit Styles

Near the style or node text entries, you will see a "pencil" symbol. Clicking this, the edit box will open, showing attributes or style information for that node or class.

Editing class information:
If you select a class for editing, the style information will be shown in the text area. Just change this and click the 'apply' button to see those changes in the document.

Editing nodes
Editing a node, you can switch between the attributes and the inner html.
You get an attribute list and you can change the values in the text fields. Clicking the 'add' button, you can add attributes for that node.
If you choose the 'HTML' button, you can modify the inner html of the node.

Options

From the Browser's extension box, you can open the options dialogue for ddt. For all the features you can manipulate with check boxes, you can set a default behaviour there.
Likewise, you can set a default for the ddt window size there.