DOM Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
m (Little grammar fix)
(Added description of Breakpoint Column)
(13 intermediate revisions not shown)
Line 1: Line 1:
-
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.
+
[[Image:Dom_Panel.png|thumb|400px|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. Note, that the panel shows a snapshot of the current state. Changes to properties don't take effect on the display of the DOM panel until you are refreshing it.
-
== Options Mini Menu ==
+
== Options 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.
+
This menu is reachable via the little arrow in the panel tab ( [[File:DOMPanelOptionsMenuArrow.png]] ) or by right-clicking on on the panel tab (since [[Firebug Release Notes#Firebug 1.9|Firebug 1.9]]).
 +
 
 +
{| 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
 +
|-
 +
| Show Inline Event Handlers || <code>extensions.firebug.showInlineEventHandlers</code> || Toggles the display of inline event handlers
 +
|-
 +
| Show Own Properties Only || <code>extensions.firebug.showOwnProperties</code> || Specifies whether only an object's [https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames own properties] shall be shown
 +
|-
 +
| Show Enumerable Properties Only || <code>extensions.firebug.showEnumerableProperties</code> || Specifies whether only [https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/keys enumerable properties] shall be shown
 +
|-
 +
| Refresh || - || Updates the display
 +
|}
 +
 
 +
For more info about tweaks available in Firebug please see the [[Firebug Preferences|full list of preferences]].
== Panel Toolbar ==
== Panel Toolbar ==
-
=== Element Path ===
+
=== Property 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.
+
The path from the currently selected property 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 ==
+
== Panel ==
 +
=== Color Codes ===
Different color codes let you distinguish between the different types of variables and improve readability. Here they are in detail:
Different color codes let you distinguish between the different types of variables and improve readability. Here they are in detail:
{| class="wikitable" style="vertical-align:top;"
{| class="wikitable" style="vertical-align:top;"
Line 27: Line 54:
|}
|}
-
== 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.
 +
 +
=== localStorage ===
 +
Note that <code>localStorage</code> is just an object so you can create, view, and edit it in the DOM view.
 +
 +
[[File:LocalStorage.PNG]]
 +
 +
=== Breakpoint Column ===
 +
You can add a breakpoint for a property by clicking the Breakpoint Column at the left side of it. By doing this the script execution will be halted as soon as the property is changed. Clicking on a set breakpoint removes it.
 +
 +
== Context Menu ==
 +
{| class="wikitable" style="width:100%; vertical-align:top;"
 +
|- bgcolor=lightgrey
 +
! style="width:180px;" | Option || Context || Shortcut || Description
 +
|-
 +
| Copy Name || Property List || - || Copies the name of the selected property to the clipboard
 +
|-
 +
| Copy Path || Property List || - || Copies the property path up to the selected property to the clipboard
 +
|-
 +
| Edit Property... || Property List || - || Lets you edit the value of the property
 +
|-
 +
| Delete Property || Property List (user-defined properties and functions) || - || Deletes the property
 +
|-
 +
| Break On Property Change || Property List (user-defined properties and functions) || - || Script execution will be stopped, if the selected property is changed
 +
|-
 +
| Refresh || Property List, Property Path || - || Refreshes the display of the Property List
 +
|}
 +
 +
Depending on the property value there are different options offered related to it. E.g. if the value is an HTML node, you'll be offered special options related to it, which are described inside the [[HTML Panel]].
 +
 +
For functions the additional context menu options are:
 +
{| class="wikitable" style="width:100%; vertical-align:top;"
 +
|- bgcolor=lightgrey
 +
! style="width:180px;" | Option || Shortcut || Description
 +
|-
 +
| Log Calls to "<function name>" || - || Logs calls to the given function; see [[monitor]] for more info
 +
|-
 +
| Copy Function || - || Copies the whole function to the clipboard
 +
|}

Revision as of 20:34, 15 April 2013

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. Note, that the panel shows a snapshot of the current state. Changes to properties don't take effect on the display of the DOM panel until you are refreshing it.

Contents

Options Menu

This menu is reachable via the little arrow in the panel tab ( DOMPanelOptionsMenuArrow.png ) or by right-clicking on on the panel tab (since Firebug 1.9).

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
Show Inline Event Handlers extensions.firebug.showInlineEventHandlers Toggles the display of inline event handlers
Show Own Properties Only extensions.firebug.showOwnProperties Specifies whether only an object's own properties shall be shown
Show Enumerable Properties Only extensions.firebug.showEnumerableProperties Specifies whether only enumerable properties shall be shown
Refresh - Updates the display

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

Panel Toolbar

Property Path

The path from the currently selected property 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.

Panel

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

Breakpoint Column

You can add a breakpoint for a property by clicking the Breakpoint Column at the left side of it. By doing this the script execution will be halted as soon as the property is changed. Clicking on a set breakpoint removes it.

Context Menu

Option Context Shortcut Description
Copy Name Property List - Copies the name of the selected property to the clipboard
Copy Path Property List - Copies the property path up to the selected property to the clipboard
Edit Property... Property List - Lets you edit the value of the property
Delete Property Property List (user-defined properties and functions) - Deletes the property
Break On Property Change Property List (user-defined properties and functions) - Script execution will be stopped, if the selected property is changed
Refresh Property List, Property Path - Refreshes the display of the Property List

Depending on the property value there are different options offered related to it. E.g. if the value is an HTML node, you'll be offered special options related to it, which are described inside the HTML Panel.

For functions the additional context menu options are:

Option Shortcut Description
Log Calls to "<function name>" - Logs calls to the given function; see monitor for more info
Copy Function - Copies the whole function to the clipboard
Personal tools