Firebug使用之四--HTML Panel
来源:互联网 发布:苹果6s淘宝下载不了 编辑:程序博客网 时间:2024/05/11 17:22
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.
Contents
[hide]- 1 Options Menu
- 2 Panel Toolbar
- 2.1 Break On Mutate
- 2.2 Edit
- 2.3 Element Path
- 3 Context Menu
- 4 Node View
- 5 Side Panels
- 5.1 Style
- 5.2 Computed
- 5.3 Layout
- 5.4 DOM
[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).
extensions.firebug.showFullTextNodes
Toggles between full text display and text preview inside the Node ViewShow White Spaceextensions.firebug.showTextNodesWithWhitespace
Toggles display of white space characters inside the Node ViewShow Commentsextensions.firebug.showCommentNodes
Toggles display of HTML comments inside the Node ViewShow Entities As Symbolsextensions.firebug.entityDisplay
Displays HTML entity characters inside the Node View in their actual character representationShow Entities As Namesextensions.firebug.entityDisplay
Displays HTML entity characters inside the Node View in their entity name representationShow Entities As Unicodeextensions.firebug.entityDisplay
Displays HTML entity characters inside the Node View in their Unicode representationHighlight Changesextensions.firebug.highlightMutations
Toggles highlighting changes to the DOM structure inside the Node ViewExpand Changesextensions.firebug.expandMutations
Toggles expanding changes to the DOM structure inside the Node ViewScroll Changes Into Viewextensions.firebug.scrollToMutations
Toggles scrolling to changes to the DOM structure inside the Node ViewShade Box Modelextensions.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 elementShow Quick Info Boxextensions.firebug.showQuickInfoBox
Toggles the display of the Quick Info Box inside the page giving fast information about the currently inspected elementFor 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
Del
Deletes the current nodeExpand/Contract AllNode in Node ViewShift
+*
, *
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 themBreak On Attribute ChangeNode in Node View-Creates an HTML breakpoint for the current node, that triggers as soon as an attribute of that node is changedBreak On Child Addition or RemovalNode 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 itBreak On Element RemovalNode in Node View-Creates an HTML breakpoint for the current node, that triggers as soon as it is removedInspect in DOM TabNode 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
/⌘
and clicking on a URL (e.g. of a <link>
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.
[edit]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.
[edit]Style
The Style Side Panel shows all CSS styles, that are currently assigned to the selected node.
[edit]Computed
The Computed Side Panel shows all style values the user agent calculated for display while interpreting the given CSS information.
[edit]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.
[edit]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.
- Firebug使用之四--HTML Panel
- Firebug使用之三--Script Panel
- Firebug使用之一--Console Panel
- ExtJS梦想之旅(四)--Panel的使用
- Firebug Net Panel Timings
- ncl 之panel的使用
- (28)ExtJS之在Panel中使用html配置项自定义面板的内容
- HTML解析之四:BeautifulSoup4的使用
- Firebug使用之二--Command Line
- Firebug使用之五--Console API
- 使用firebug
- Firebug使用
- firebug 四款插件
- asp.net之panel的一次使用
- 修改panel的html
- Flex学习之路之十七 Panel的使用
- 初识Firebug 全文 — firebug的使用
- 初识Firebug 全文 — firebug的使用
- 程序员技术练级攻略
- GTK、KDE、Gnome、XWindows 图形界面
- Eclipse 快捷键 常用
- myeclipse的debug模式中breakpoint窗口怎么调出来
- nyoj 78 圈水池
- Firebug使用之四--HTML Panel
- Listview的onItemClickListener无法响应的解决方法
- android 耳机按钮深层理解audioManager.registerMediaButtonEventReceiver
- redis命令总结
- 饿死胆小的,撑死胆大的------简评百度收购91无线
- mac 10.8 技巧、优化
- Qt 平常遇到之后自己搜索一些东西的集合(2)
- csapp2e 家庭作业 5.21
- 在线日志被删除恢复