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. 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 Menu ==

+

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]]).

| 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

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.

+

+

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

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

+

|}

== Color Codes ==

== Color Codes ==

Revision as of 16:14, 23 December 2012

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.

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.

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.