DOM Panel
From FirebugWiki
Johnjbarton (Talk | contribs) (→Auto-Completion) |
Sebastianz (Talk | contribs) (Replaced description of Options Mini Menu by table explaning all preferences in detail) |
||
| Line 3: | Line 3: | ||
== Options Mini Menu == | == Options Mini Menu == | ||
| - | + | {| class="wikitable" style="width:100%; vertical-align:top;" | |
| + | |- bgcolor=lightgrey | ||
| + | ! style="width:220px;" | Option || Preference || Description | ||
| + | |- | ||
| + | | Show User-defined Properties || <code>extensions.firebug.showUserProps</code> || Toggles the display of user-defined object properties | ||
| + | |- | ||
| + | | Show User-defined Functions || <code>extensions.firebug.showUserFuncs</code> || Toggles the display of user-defined object methods | ||
| + | |- | ||
| + | | Show DOM Properties || <code>extensions.firebug.showDOMProps</code> || Toggles the display of properties specified inside the DOM | ||
| + | |- | ||
| + | | Show DOM Functions || <code>extensions.firebug.showDOMFuncs</code> || Toggles the display of functions specified inside the DOM | ||
| + | |- | ||
| + | | Show DOM Constants || <code>extensions.firebug.showDOMConstants</code> || Toggles the display of constants specified inside the DOM | ||
| + | |- | ||
| + | | Refresh || - || Updates the display | ||
| + | |} | ||
== Panel Toolbar == | == Panel Toolbar == | ||
Revision as of 01:14, 3 July 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
| Option | Preference | Description |
|---|---|---|
| Show User-defined Properties | extensions.firebug.showUserProps | Toggles the display of user-defined object properties |
| Show User-defined Functions | extensions.firebug.showUserFuncs | Toggles the display of user-defined object methods |
| Show DOM Properties | extensions.firebug.showDOMProps | Toggles the display of properties specified inside the DOM |
| Show DOM Functions | extensions.firebug.showDOMFuncs | Toggles the display of functions specified inside the DOM |
| Show DOM Constants | extensions.firebug.showDOMConstants | Toggles the display of constants specified inside the DOM |
| Refresh | - | Updates the display |
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 they are 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.
localStorage
Note that localStorage is just an object so you can create, view, and edit it in the DOM view.
