前端开发工具DevTools的详细知识点总结（四）

element面板扩展之DOM

在最早的第一期博客里已经介绍过element面板的基本相关功能。

这期，我将以DOM树为基础进一步讲述一些细节且实用的知识点。

查看DOM节点

检查元素节点（一些重要的基础操作）

选择浏览器的某一元素->右键->检查即可，然后devtools的Elements面板会跳转并显示此元素在DOM树的位置。

选择DOM树上的一个元素，然后我们有两种重要的功能操作（检查状态默认是选择状态）：
点击其最左边的按钮，此效果“一般的”右键效果一样，然后会弹出如下的功能区域框：

如果是选中当前节点的文本内容再执行右键操作，则弹出不一样的功能区域框：

不难发现这两个功能区域框的核心功能几乎一样，而这章的重点也就是讲述这些DOM功能框，其中有些比较简单，很浅显的功能我在这里就不讲述或者一带而过。为了简述方便，在下文中这些功能区域框我都默认是通过右键显示。

使用键盘导航DOM树

检查一个节点显示其DOM树，此时可用键盘的up，down，left，right四个键来查看此DOM树的层级结构，此功能比较简单，自己亲自动手一试便懂。

Scroll into view

这个功能类似于反向检查，检查是通过浏览器的某一元素找到其在DOM树的对于位置，而Scroll into view则是通过DOM树的某一节点找到其在浏览器页面的相应位置。
具体步骤：选择某一元素->右键->Scroll into view

然后就能浏览器页面就会跳转到你所指定的DOM节点的位置。

搜索节点

打开DOM树并按下Ctrl+f，在最下面会显示搜索框，输入内容然后就能按照指定的内容在DOM树上进行搜索查询。

注意：Ctrl+f是个很公用的默认搜索查询的快捷键，不仅仅devtools能使用，在浏览器以及开发工具等软件里面都能使用。

编辑DOM

编辑功能

在DOM树上节点元素支持三个基本的编辑功能：文本内容，节点属性以及节点内容。

以这个li节点为例，它的内容Howard可以编辑修改，它的style属性可以编辑修改，它的类型li也能编辑修改。
编辑的方式有两种，一种方式是直接双击此元素结点，还有一种方式是通过右键的功能区来操作。

重排序节点

选择一个DOM树节点，在DOM树上进行上下拖动便可改变其在DOM树上的位置，并且可立即在浏览器页面上生效。

Force state

此功能等同于Styles面板的:hov的功能。

只不过在这里有另外一种作用方式：（即Force state）

隐藏结点

先选择一个DOM树元素，然后又两种方式隐藏/显示此结点：
快捷键H和右键功能区

这是节点隐藏后的标识：

删除结点

先选择一个DOM树元素，然后又两种方式删除此结点：
快捷键DEL和右键功能区

注意：此操作一旦删除就无法恢复，但是可通过windows默认的撤回键Ctrl+z进行恢复操作。

DOM断点

在上边文章里，我提及过DOM断点这个概念，它也属于浏览器的一种可进行调试的断点类型。
首先，我们看看如何在DOM树上打DOM断点。
先选择一个DOM树元素，右键->Break on。

不难发现，这里有三种DOM断点：subtree modifications，attribute modifications，node removal。
这三种断点之间没有交集，即可以同时打上多个断点。
subtree modifications：在节点上放置子树修改断点后，在添加或删除节点的任何后代时，devtools将暂停页面。
attribute modifications：暂停导致节点的任何属性更改的JavaScript。
node removal：在删除特定节点时暂停。

右键功能区的其它功能

上述已经讲解了DOM树里面的一些基本常用的功能，其中也使用到不少右键功能区的一些功能，接下来我补充完善右键功能区的剩下一些功能。

Store as global variable

点击此功能按钮，devtools会自动把此DOM元素定义为一个全局变量，并在控制台面板显示。

Copy

这里的一些功能都比较简单，这里我以Copy selector为例演示其效果。
下图即显示此选中的p标签的selector。

此功能区对于快速了解目标DOM元素的结构是特别有帮助。

结语

这期知识介绍到此就结束了，百闻不如一练，看了这么多东西终究不如自己亲自动手操作一番效果来的更好，咋们下期再见！