html 自动刷新panel,Firebug使用之四--HTML Panel

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 (  ) 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.

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

Scroll Into View

Node

-

Scrolls the page, so that the current node is visible

Add Attribute...

-

Starts inline editing to add a new attribute to the current node

Edit Attribute ""...

Node attribute inNode View

-

Starts inline editing for the current node attribute

Delete Attribute ""

Node attribute inNode View

-

Deletes the current node attribute

Edit HTML...

-

Switches to the Edit Mode and allows editing the contents of the current node

Delete Element

Del

Deletes the current node

Expand/Contract All

Shift +*, *

Expands or collapses all child nodes except 

Break On Attribute Change

-

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

-

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

-

Creates an HTML breakpoint for the current node, that triggers as soon as it is removed

Inspect in DOM Tab

-

Lets you inspect the current node inside the DOM 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 → and ← keys.

Holding down Ctrl/⌘ and clicking on a URL (e.g. of a  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

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.

Style

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

Computed

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

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.

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.