HTML Panel

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Replaced description of Options Mini Menu by table explaning all preferences in detail)
(Added description for Events side panel)
 
(23 intermediate revisions not shown)
Line 2: Line 2:
The HTML panel displays the generated HTML/XML of the currently opened page. It differs from the normal source code view, because it also displays all manipulations on the DOM tree. On the right side it shows the CSS styles defined for the currently selected tag, the computed styles for it, layout information and the DOM variables assigned to it in different tabs.
The HTML panel displays the generated HTML/XML of the currently opened page. It differs from the normal source code view, because it also displays all manipulations on the DOM tree. On the right side it shows the CSS styles defined for the currently selected tag, the computed styles for it, layout information and the DOM variables assigned to it in different tabs.
-
== Options Mini Menu==
+
== Options Menu==
 +
This menu is reachable via the little arrow in the panel tab ( [[Image:HTMLPanelOptionsMenuArrow.png]] ) or by right-clicking on on the panel tab (since [[Firebug 1.9 Release Notes|Firebug 1.9]]).
 +
 
{| class="wikitable" style="width:100%; vertical-align:top;"
{| class="wikitable" style="width:100%; vertical-align:top;"
|- bgcolor=lightgrey
|- bgcolor=lightgrey
Line 13: Line 15:
| Show Comments || <code>extensions.firebug.showCommentNodes</code> || Toggles display of HTML comments inside the [[HTML Panel#Node View|Node View]]
| Show Comments || <code>extensions.firebug.showCommentNodes</code> || Toggles display of HTML comments inside the [[HTML Panel#Node View|Node View]]
|-  
|-  
-
| Show Basic Entities || <code>extensions.firebug.showTextNodesWithEntities</code> || Toggles display of basic HTML entity characters inside the [[HTML Panel#Node View|Node View]] between the actual character representation and it's entity equivalent
+
| Show Entities As Symbols || <code>extensions.firebug.entityDisplay</code> || Displays HTML entity characters inside the [[HTML Panel#Node View|Node View]] in their actual character representation
 +
|-
 +
| Show Entities As Names || <code>extensions.firebug.entityDisplay</code> || Displays HTML entity characters inside the [[HTML Panel#Node View|Node View]] in their entity name representation
 +
|-
 +
| Show Entities As Unicode || <code>extensions.firebug.entityDisplay</code> || Displays HTML entity characters inside the [[HTML Panel#Node View|Node View]] in their Unicode representation
|-
|-
| Highlight Changes || <code>extensions.firebug.highlightMutations</code> || Toggles highlighting changes to the DOM structure inside the [[HTML Panel#Node View|Node View]]
| Highlight Changes || <code>extensions.firebug.highlightMutations</code> || Toggles highlighting changes to the DOM structure inside the [[HTML Panel#Node View|Node View]]
Line 23: Line 29:
| Shade Box Model || <code>extensions.firebug.shadeBoxModel</code> || Toggles between the display of a box model representing the contents, margin, padding and the border and a display of just a frame around the inspected element
| Shade Box Model || <code>extensions.firebug.shadeBoxModel</code> || Toggles between the display of a box model representing the contents, margin, padding and the border and a display of just a frame around the inspected element
|-
|-
-
| Show Quick Info Box || <code>extensions.firebug.showQuickInfoBox</code> || Toggles the display of an info popup inside the page giving fast information about the currently inspected element
+
| Show Quick Info Box || <code>extensions.firebug.showQuickInfoBox</code> || Toggles the display of the [[Quick Info Box]] inside the page giving fast information about the currently inspected element
|}
|}
 +
 +
For more info about tweaks available in Firebug please see the [[Firebug Preferences|full list of preferences]].
== Panel Toolbar ==
== Panel Toolbar ==
=== Break On Mutate ===
=== Break On Mutate ===
-
The "Break On Mutate" button gives you the possibility to stop JavaScript execution when any mutation of the HTML via the script occurs. If a mutation occurs, Firebug halts the script execution and jumps to the [[Script Panel]] to the line where the change happened.
+
The "Break On Mutate" button ( [[File:Break_On_Mutate_Button.png]] ) gives you the possibility to stop JavaScript execution when any mutation of the HTML via the script occurs. If a mutation occurs, Firebug halts the script execution and jumps to the [[Script Panel]] to the line where the change happened.
=== Edit ===
=== Edit ===
Line 34: Line 42:
=== Element Path ===
=== Element Path ===
-
Inside the panel menu there is a list of nodes, starting with the currently selected node and going up the element structure up to the root node of the document. The list looks like what some Web sites call a "breadcrumb" list. Hovering one of the nodes inside the list shows a highlighting box around the element inside the page and clicking on it selects the node inside the tree structure of the HTML panel. The context menu of each item in the list offers thereby the same options as the node's context menu inside the [[#Tree structure|tree structure]].
+
Inside the panel menu there is a list of nodes, starting with the currently selected node and going up the element structure up to the root node of the document. The list looks like what some Web sites call a "breadcrumb" list. Hovering one of the nodes inside the list shows a highlighting box around the element inside the page and clicking on it selects the node inside the tree structure of the HTML panel. The context menu of each item in the list offers thereby the same options as the node's context menu inside the [[#Node View|Node View]].
 +
 
 +
== Context Menu ==
 +
{| class="wikitable" style="width:100%; vertical-align:top;"
 +
|- bgcolor=lightgrey
 +
! style="width:180px;" | Option || Context || Shortcut || Description
 +
|-
 +
| Copy HTML || Node || - || Copies the current node and all it's contents to the clipboard
 +
|-
 +
| Copy innerHTML || Node || - || Copies the contents of the current node to the clipboard
 +
|-
 +
| Copy XPath || Node || - || Copies the XPath to the current node to the clipboard
 +
|-
 +
| Copy CSS Path || Node || - || Copies the CSS path (selector) of the current node to the clipboard
 +
|-
 +
| Log Events || Node || - || Logs events (e.g. mousemove, click, focus, etc.) triggered at the current node to the [[Console Panel]]
 +
|-
 +
| Scroll Into View || Node || - || Scrolls the page, so that the current node is visible
 +
|-
 +
| Add Attribute... || Node in [[#Node View|Node View]] || - || Starts inline editing to add a new attribute to the current node
 +
|-
 +
| Edit Attribute "<attribute name>"... || Node attribute in [[#Node View|Node View]] || - || Starts inline editing for the current node attribute
 +
|-
 +
| Delete Attribute "<attribute name>" || Node attribute in [[#Node View|Node View]] || - || Deletes the current node attribute
 +
|-
 +
| Edit HTML... || Node in [[#Node View|Node View]] || - || Switches to the [[#Edit|Edit Mode]] and allows editing the contents of the current node
 +
|-
 +
| Delete Element || Node in [[#Node View|Node View]] || <code class="key">Del</code> || Deletes the current node
 +
|-
 +
| Expand/Contract All || Node in [[#Node View|Node View]] || <code class="key">Shift</code> + <code class="key">*</code>, <code class="key">*</code> || Expands or collapses all child nodes except <code>&lt;script&gt;</code>, <code>&lt;style&gt;</code> and <code>&lt;link&gt;</code> of the current node; pressing <code class="key">Shift</code> while clicking or hitting <code class="key">*</code> expands all nodes including them
 +
|-
 +
| Break On Attribute Change || Node in [[#Node View|Node View]] || - || Creates an HTML breakpoint for the current node, that triggers as soon as an attribute of that node is changed
 +
|-
 +
| Break On Child Addition or Removal || Node in [[#Node View|Node View]] || - || Creates an HTML breakpoint for the current node, that triggers as soon as a child node is added to or removed from it
 +
|-
 +
| Break On Element Removal || Node in [[#Node View|Node View]] || - || Creates an HTML breakpoint for the current node, that triggers as soon as it is removed
 +
|-
 +
| Inspect in DOM Tab || Node in [[#Node View|Node View]] || - || Lets you inspect the current node inside the [[DOM Panel]]
 +
|}
== Node View ==
== Node View ==
-
The body of the panel represents the document nodes of the page converted back into a source-like view. Note that this view is created from the live document: '''this is not a source view'''. The view can be based on any kind of markup, e.g. HTML, XML, or SVG graphics. Right-clicking on a node opens a context menu with options for copying the contents or the path as XPath or CSS selector path. It offers an option for logging events based on the node and it can be scrolled into view. You can jump to the DOM panel to inspect the element, edit the HTML content of the node, add attributes or delete the node. Beyond that you have the possibility to enable different "Break On..." features for the specified node.
+
The body of the panel represents the document nodes of the page converted back into a source-like view. Note that this view is created from the live document: '''this is not a source view'''. The view can be based on any kind of markup, e.g. HTML, XML, or SVG graphics.
-
When you mouseover the nodes a corresponding area of the page is highlighted :
+
Single nodes can be expanded/collapsed by clicking the twisty besides them, using the <code class="key">+</code> and <code class="key">-</code> or the <code class="key">&rarr;</code> and <code class="key">&larr;</code> keys.
-
* yellow is margin area
+
 
-
* darkblue/purple is padding area
+
Holding down <code class="key">Ctrl</code>/<code class="key">&#8984;</code> and clicking on a URL (e.g. of a <code>&lt;link&gt;</code> tag) opens the URL in a new tab.
-
* lightblue is content
+
 
 +
Faintly displayed elements mean they are not visible inside the page. That is e.g. when the CSS style <code>display: none</code> is applied to the element or the element doesn't have any dimensions.
 +
 
 +
Right-clicking on a node or a node attribute opens a [[#Context Menu|context menu with different options]].
 +
 
 +
When the option ''Shade Box Model'' is set and you mouseover the nodes a corresponding area of the page is highlighted. The different colors thereby reflect different parts of the element.
 +
{| class="wikitable" style="vertical-align:top;"
 +
|- bgcolor=lightgrey
 +
! style="width:100px;" | Color || Description
 +
|-
 +
| <div style="margin:auto;width:15px;height:15px;background-color:SkyBlue;"></div> || content area
 +
|-
 +
| <div style="margin:auto;width:15px;height:15px;background-color:SlateBlue;"></div> || padding area
 +
|-
 +
| <div style="margin:auto;width:15px;height:15px;background-color:#444444;"></div> || border area
 +
|-
 +
| <div style="margin:auto;width:15px;height:15px;background-color:#EDFF64;"></div> || margin area
 +
|}
== Side Panels ==
== Side Panels ==
Line 48: Line 111:
=== Style ===
=== Style ===
-
Inside the style tab you can see the CSS styles, that are currently assigned to the selected node. It also offers you similar possibilities of CSS manipulation like the [[CSS panel]]. The difference between them is organizational. Inside the CSS tab just the styles assigned to the selected node are shown (which can lie in different files); Inside the CSS panel all styles defined in one CSS file is shown. Furthermore the CSS tab shows you the cascading info, meaning styles, that are overwritten by other style definitions will be shown lined-through.
+
The [[Style Side Panel]] shows all CSS styles, that are currently assigned to the selected node.
-
 
+
-
The Style side panel options menu includes options for:
+
-
* showing the user agent's CSS styles,
+
-
* expanding shorthand CSS properties,
+
-
* and whether ''':active''' and ''':hover''' styles shall be listed inside the shown styles.
+
=== Computed ===
=== Computed ===
-
The computed tab shows all style values the browser calculated for display while interpreting the given CSS information. So it shows the actual displayed styles.
+
The [[Computed Side Panel]] shows all style values the user agent calculated for display while interpreting the given CSS information.  
-
The options menu offers the possibility to reload the displayed information.
+
=== Layout ===
=== Layout ===
-
The layout tab gives a quick overview over the box model values. But it also offers an easy way to change the values by simply clicking on one of them. When hovering over different parts of the box model, the element inside the page highlights, the borders of the hovered part has line guides and a horizontal and vertical rules for measurement.
+
The [[Layout Side Panel]] gives a quick overview over the box model values for the selected node and offers a way to manipulate them.
-
In the options menu you can toggle the display of the line guides and rules.
+
=== DOM ===
=== DOM ===
-
You can see information about the DOM according to the selected node inside the DOM tab. This tab offers the full functionality of the [[DOM Panel]]. This also includes its [[DOM Panel#Options menu|options menu]].
+
You can see information about the DOM according to the selected node inside the DOM tab. This tab offers the full functionality of the [[DOM Panel]]. This also includes its [[DOM Panel#Options Menu|Options Menu]].
 +
 
 +
=== Events ===
 +
The [[Events Side Panel]] lists all event handlers assigned to the selected element as well as event listeners for <code>document</code> and <code>window</code>.
 +
 
 +
[[Category:Firebug]]
 +
[[Category:UI]]
 +
[[Category:Panels]]

Latest revision as of 07:42, 25 July 2014

HTML Panel

The HTML panel displays the generated HTML/XML of the currently opened page. It differs from the normal source code view, because it also displays all manipulations on the DOM tree. On the right side it shows the CSS styles defined for the currently selected tag, the computed styles for it, layout information and the DOM variables assigned to it in different tabs.

Contents

[edit] Options Menu

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

Option Preference Description
Show Full Text extensions.firebug.showFullTextNodes Toggles between full text display and text preview inside the Node View
Show White Space extensions.firebug.showTextNodesWithWhitespace Toggles display of white space characters inside the Node View
Show Comments extensions.firebug.showCommentNodes Toggles display of HTML comments inside the Node View
Show Entities As Symbols extensions.firebug.entityDisplay Displays HTML entity characters inside the Node View in their actual character representation
Show Entities As Names extensions.firebug.entityDisplay Displays HTML entity characters inside the Node View in their entity name representation
Show Entities As Unicode extensions.firebug.entityDisplay Displays HTML entity characters inside the Node View in their Unicode representation
Highlight Changes extensions.firebug.highlightMutations Toggles highlighting changes to the DOM structure inside the Node View
Expand Changes extensions.firebug.expandMutations Toggles expanding changes to the DOM structure inside the Node View
Scroll Changes Into View extensions.firebug.scrollToMutations Toggles scrolling to changes to the DOM structure inside the Node View
Shade Box Model extensions.firebug.shadeBoxModel Toggles between the display of a box model representing the contents, margin, padding and the border and a display of just a frame around the inspected element
Show Quick Info Box extensions.firebug.showQuickInfoBox Toggles the display of the Quick Info Box inside the page giving fast information about the currently inspected element

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

[edit] Panel Toolbar

[edit] Break On Mutate

The "Break On Mutate" button ( Break On Mutate Button.png ) gives you the possibility to stop JavaScript execution when any mutation of the HTML via the script occurs. If a mutation occurs, Firebug halts the script execution and jumps to the Script Panel to the line where the change happened.

[edit] Edit

Enabling the "Edit" mode by hitting the appropriate button lets you edit the HTML directly. Therefore it opens a text editor, which is filled with the node and its contents you currently had selected in the formatted (tree view) mode. After turning the edit mode off again the display switches back to the formatted mode, which now displays the changes made to the source code.

[edit] Element Path

Inside the panel menu there is a list of nodes, starting with the currently selected node and going up the element structure up to the root node of the document. The list looks like what some Web sites call a "breadcrumb" list. Hovering one of the nodes inside the list shows a highlighting box around the element inside the page and clicking on it selects the node inside the tree structure of the HTML panel. The context menu of each item in the list offers thereby the same options as the node's context menu inside the Node View.

[edit] Context Menu

Option Context Shortcut Description
Copy HTML Node - Copies the current node and all it's contents to the clipboard
Copy innerHTML Node - Copies the contents of the current node to the clipboard
Copy XPath Node - Copies the XPath to the current node to the clipboard
Copy CSS Path Node - Copies the CSS path (selector) of the current node to the clipboard
Log Events Node - Logs events (e.g. mousemove, click, focus, etc.) triggered at the current node to the Console Panel
Scroll Into View Node - Scrolls the page, so that the current node is visible
Add Attribute... Node in Node View - Starts inline editing to add a new attribute to the current node
Edit Attribute "<attribute name>"... Node attribute in Node View - Starts inline editing for the current node attribute
Delete Attribute "<attribute name>" Node attribute in Node View - Deletes the current node attribute
Edit HTML... Node in Node View - Switches to the Edit Mode and allows editing the contents of the current node
Delete Element Node in Node View Del Deletes the current node
Expand/Contract All Node in Node View Shift + *, * Expands or collapses all child nodes except <script>, <style> and <link> of the current node; pressing Shift while clicking or hitting * expands all nodes including them
Break On Attribute Change Node in Node View - Creates an HTML breakpoint for the current node, that triggers as soon as an attribute of that node is changed
Break On Child Addition or Removal Node in Node View - Creates an HTML breakpoint for the current node, that triggers as soon as a child node is added to or removed from it
Break On Element Removal Node in Node View - Creates an HTML breakpoint for the current node, that triggers as soon as it is removed
Inspect in DOM Tab Node in Node View - Lets you inspect the current node inside the DOM Panel

[edit] Node View

The body of the panel represents the document nodes of the page converted back into a source-like view. Note that this view is created from the live document: this is not a source view. The view can be based on any kind of markup, e.g. HTML, XML, or SVG graphics.

Single nodes can be expanded/collapsed by clicking the twisty besides them, using the + and - or the and keys.

Holding down Ctrl/ and clicking on a URL (e.g. of a <link> tag) opens the URL in a new tab.

Faintly displayed elements mean they are not visible inside the page. That is e.g. when the CSS style display: none is applied to the element or the element doesn't have any dimensions.

Right-clicking on a node or a node attribute opens a context menu with different options.

When the option Shade Box Model is set and you mouseover the nodes a corresponding area of the page is highlighted. The different colors thereby reflect different parts of the element.

Color Description
content area
padding area
border area
margin area

[edit] Side Panels

Besides node manipulation the HTML panel also offers a lot of information around the selected elements. This information appears in the side panels on the right, selected by another set of tabs.

[edit] Style

The Style Side Panel shows all CSS styles, that are currently assigned to the selected node.

[edit] Computed

The Computed Side Panel shows all style values the user agent calculated for display while interpreting the given CSS information.

[edit] Layout

The Layout Side Panel gives a quick overview over the box model values for the selected node and offers a way to manipulate them.

[edit] DOM

You can see information about the DOM according to the selected node inside the DOM tab. This tab offers the full functionality of the DOM Panel. This also includes its Options Menu.

[edit] Events

The Events Side Panel lists all event handlers assigned to the selected element as well as event listeners for document and window.

Personal tools