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.

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.

+

+

Faintly displayed elements mean they are not visible inside the page.

Right-clicking on a node or a node attribute opens a [[#Context Menu|context menu with different options]].

Right-clicking on a node or a node attribute opens a [[#Context Menu|context menu with different options]].

Revision as of 22:30, 14 July 2012

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.

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.

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.

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.

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

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.

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