查看和编辑HTML

您可以在HTML面板查看和编辑页面的HTML。

HTML导航

At the top of the HTML pane there's a toolbar split into two sections: a trail of breadcrumbs and a search box.HTML面板的顶部有一个工具栏分为两个部分：一个面包屑导航和一个搜索框。

这里显示了通过文档包含所选元素的分支的完整层次结构：

如果你点击并按住导航条上的一个元素，会出现一个弹出菜单，让你选择一个元素的同级。如果想要更宽的可用空间，点击导航栏左右两边的小箭头图标可以滚动面包屑。

从Firefox 34起，将您的鼠标停留在一个面包屑上会高亮页面元素。

搜索

点击搜索框可以扩大它，然后输入你想寻找的类型。你会看到一个弹出匹配提示框。

按“Enter”，页面中的第一个元素类型将被选中，再按“Enter”查找下一个。

你可以以CSS选择器搜索搜索一个标签, 所以你可以通过输入字符串 #myId 来检索拥有 myId 的元素。

从Firefox 40起，您不使用CSS选择器可以搜索类或id属性，可以直接输入 myId 查找元素。

HTML 树

剩下的窗口显示你页面的HTML树（这个UI也被称为标签视图）。左边的每个箭头表示一个节点：单击箭头来展开节点。如果你按住Alt键单击箭头，会一次性展开下面的所有节点。

移动鼠标经过HTML树的一个节点就会高亮页面上的对应元素。

使用 display:none 隐藏的节点显示为浅色（比如像 <head> 这样不被显示的节点一样）。

::before 和 ::after

从Firefox 35起，你可以查看添加的 ::before 和 ::after 伪对象：

元素弹出菜单

右键元素激活这个菜单，您可以在一个特定节点使用弹出菜单执行某些常见的任务。

菜单给了你以下选项：

作为HTML编辑	编辑元素的 HTML
复制内部 HTML	Copy the inner HTML for the element
复制外部 HTML	Copy the outer HTML for the element
复制唯一选择器	Copy a CSS selector that uniquely selects the element
复制图像数据URL	如果选择的元素是图像的话，以 data:// URL的形式复制图像
显示 DOM 属性	Open the split console and enter the console command "`inspect($0)`" to inspect the currently selected element.
粘贴到内部 HTML	Paste the clipboard contents into the node as its innerHTML.
粘贴到外部 HTML	Paste the clipboard contents into the node as its outerHTML.
粘贴/之前	Paste the clipboard contents into the document immediately before this node.
粘贴/之后	Paste the clipboard contents into the document immediately after this node.
粘贴/第一个子对象	Paste the clipboard contents into the document as the first child of this node.
粘贴/最后一个子对象	Paste the clipboard contents into the document as the last child of this node.
Scroll Into View	New in Firefox 40 Scrolls the web page so the selected node is visible.
删除节点	Delete the element
Open Link in New Tab	New in Firefox 40 (only when invoked over a link, such as an href attribute) Opens the linked item in a new tab.
Open File in Debugger	New in Firefox 40 (only when invoked over a link to a JS source) Opens the linked source in the Debugger.
Open File in Style-Editor	New in Firefox 40 (only when invoked over a link to a CSS source) Opens the linked source in the Style Editor.
Copy Link Address	New in Firefox 40 (only when invoked over a URL) Copy the URL.
:hover	Set the :hover CSS pseudo-class
:active	Set the :active CSS pseudo-class
:focus	Set the :focus CSS pseudo-class

编辑 HTML

您可以直接在HTML面板编辑HTML标签、属性和内容：双击要编辑的文本，修改它，按Enter键立即看到更改效果。

编辑元素的 outerHTML，激活元素的弹出菜单，选择“作为 HTML 编辑”。你会在HTML面板看到一个文本框：

在这里你可以添加任何HTML代码：改变元素的标签，改变现有元素，或添加新的。一旦你点击外框，修改即应用于页面。

复制与粘贴

您可以在HTML树种使用弹出菜单来复制节点并粘贴到所需的位置。

拖拽功能

新增于 Firefox 39。

从Firefox 39起，您可以通过移动HTML树的节点来编辑HTML。点击并按住任何元素，然后将其拖在树的上或下，当您释放鼠标按钮时，该元素将被插入相应的位置：