HTML Panel

From FirebugWiki
Revision as of 04:19, 5 May 2010 by Sebastianz (Talk | contribs) (Description of the HTML panel)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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

The options menu contains an option for toggling the display of full text contents or a shortened version, for white spaces, for comments and basic entities. Functional options include highlighting changes to the DOM tree, expanding the changes and scrolling them into view. Besides that you can choose, if you want the box model to be shaded or just marked by a frame around it when hovering nodes inside the tree structure and have an option to display a quick info box inside the page, that shows the most important information about a node when hovering it inside the structure.

Panel menu

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.

Breadcrumb list

Inside the panel menu there is a breadcrumb list of the nodes starting with the currently selected node and going the XML structure up to the root node. 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

The tree structure represents the DOM structure of the nodes of the page's source. The source can be based on any kind of XML structure, even SVG graphics can be edited. 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.


Besides node manipulation the HTML panel also offers a lot of information around the selected elements. For this reason it has a frame on the right side containing several tabs.


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, that inside the CSS tab just the styles assigned to the selected node are shown (which can lie in different files), but inside the panel all styles defined inside the CSS files are shown. Furthermore the CSS tab shows you the cascading info, meaning styles, that are overwritten by other style definitions will be shown lined-through. It's options menu includes an option 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.


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 options menu offers the possibility to reload the displayed information.


The layout tab was basically created for getting 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. In addition to that when hovering the different parts of the box model it highlights the element inside the page, marks the borders of the hovered part with line guides and shows a horizontal and vertical rules for measurement. In the options menu you can toggle the display of the line guides and rules.


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.