Difference between revisions of "HTML Panel"

From FirebugWiki
Jump to: navigation, search
(Added keys available in Node View)
(Added info how to open the options menu)
Line 3: Line 3:
== Options Menu==
== Options Menu==
This menu is reachable via the little arrow in the panel tab ( [[Image:optionsMenuArrow.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;"
{| class="wikitable" style="width:100%; vertical-align:top;"
|- bgcolor=lightgrey
|- bgcolor=lightgrey

Revision as of 22:29, 11 October 2011

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.

Options Menu

This menu is reachable via the little arrow in the panel tab ( File:OptionsMenuArrow.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 Basic Entities extensions.firebug.showTextNodesWithEntities Toggles display of basic HTML entity characters inside the Node View between the actual character representation and it's entity equivalent
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 an info popup 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.

Panel Toolbar

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.


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.

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.

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 Right Arrow and Left Arrow keys. To expand/collapse a node and its child nodes recursively you can either use the context menu option "Expand/Contract All" or press * on the keyboard. Note, that this won't expand <script>, <style> and <link> tags. To also expand these you additionally have to press Shift.

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.

When you mouseover the nodes a corresponding area of the page is highlighted:

  • yellow is margin area
  • darkblue/purple is padding area
  • lightblue is content

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.


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


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


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


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.