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[hide] |
[edit]Options Menu
This menu is reachable via the little arrow in the panel tab ( 
) 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 ( 
) 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 inNode View | - | Starts inline editing for the current node attribute |
| Delete Attribute "<attribute name>" | Node attribute inNode 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/
