DOM Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
m (Added link to preferences page)
m (Renamed "Options Mini Menu" to "Options Menu")
Line 2: Line 2:
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.
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.
-
== Options Mini Menu ==
+
== Options Menu ==
{| class="wikitable" style="width:100%; vertical-align:top;"
{| class="wikitable" style="width:100%; vertical-align:top;"
|- bgcolor=lightgrey
|- bgcolor=lightgrey

Revision as of 11:49, 8 June 2011

DOM Panel

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 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

For more info about tweaks available in Firebug please see the full list of preferences.

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.

LocalStorage.PNG

Personal tools