DOM Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Description of the DOM Panel)
(Added color codes descriptions)
Line 9: Line 9:
== Color Codes ==
== Color Codes ==
-
Different color codes let you distinguish between the different types of variables and improve readability.
+
Different color codes let you distinguish between the different types of variables and improve readability. Here are they in detail:
 +
{| class="wikitable" style="vertical-align:top;"
 +
|- bgcolor=lightgrey
 +
! style="width:100px" | Format || Description
 +
|-
 +
|<span style="color:black">'''Bold Black'''</span> || Objects
 +
|-
 +
|<span style="color:black">Black</span> || DOM objects
 +
|-
 +
|<span style="color:gray">''get'' in gray</span> || "Getter" functions
 +
|-
 +
|<span style="color:darkGreen">'''Bold green'''</span> || User functions
 +
|-
 +
|<span style="color:darkGreen">Green</span> || DOM functions
 +
|-
 +
|<span style="color:red">'''Bold Red'''</span> || Constructor functions
 +
|}
== Auto-Completion ==
== Auto-Completion ==
Like in the [[Console Panel|Console]], [[CSS Panel|CSS]] and [[HTML Panel]] variables are auto-completed while typing. This enhances productivity and supports you making changes.
Like in the [[Console Panel|Console]], [[CSS Panel|CSS]] and [[HTML Panel]] variables are auto-completed while typing. This enhances productivity and supports you making changes.

Revision as of 23:25, 8 May 2010

Inside the DOM Panel you get information about all the different DOM properties and methods. For objects and arrays it offers a expandable tree view. Clicking on them limits the display of the DOM tree to these objects resp. arrays and shows the current element path as breadcrumb list inside the Panel Toolbar. Clicking on a function jumps to it inside the Script Panel.

Contents

Options Mini Menu

The Options Mini Menu offers toggling the display of user-defined properties and functions, DOM properties, functions and constants and lets you refresh the list

Panel Toolbar

Element Path

The path from the currently selected element up to window is shown as breadcrumb list inside the Panel Toolbar. Clicking on one of the items displays the contents of the appropriate property of the DOM tree. Right-clicking on the Panel Toolbar offers an option for refreshing the displayed data.

Color Codes

Different color codes let you distinguish between the different types of variables and improve readability. Here are they in detail:

Format Description
Bold Black Objects
Black DOM objects
get in gray "Getter" functions
Bold green User functions
Green DOM functions
Bold Red Constructor functions

Auto-Completion

Like in the Console, CSS and HTML Panel variables are auto-completed while typing. This enhances productivity and supports you making changes.

Personal tools