chrome-devtools开发者工具操作DOM

Chrome DevTools(开发者工具)是一套直接内置于Google Chrome浏览器中的网络开发者工具。

Chrome DevTools帮助快速编辑html页面和诊断问题,帮助更快的解决网站所遇到的问题。使用Chrome 开发者工具可以查看和更改任何页面。

打开DevTools(开发者工具)

打开DevTools有许多方法,根据不同的用户对UI侧重点不同,打开DevTools的快捷方式也有所不同。

通用方式

如果要使用DOM或CSS,右键单击页面上的元素,然后选择“ 检查” 以跳转到[Element]面板。

快捷键方式

Command+ Option+ C(Mac)

Control+ Shift+ C(Windows,Linux,Chrome OS)

查看DOM节点

检查节点

当对特定DOM节点感兴趣时,打开DevTools(F12),通过Inspect选中需要的调查节点。
单击DevTools左上角的Inspect 检查图标。

使用键盘导航DOM树

右键单击页面元素并选择DevTools中的Inspect图标。以便在DOM树中选中指定元素。在DOM树中选择节点后,可以使用键盘导航DOM树。

通过上下键,顺序选择当前元素的前后兄弟节点。

通过左右方向键,展开和关闭当前节点的子节点。连续左方向键,依次关闭已展开的dom节点。连续右键依次打开未展开的dom元素。

搜索节点

可以通过字符串、CSS选择器,或XPath选择器搜索DOM树。

将光标对准[Element]面板。

按Control+F或Command+ F(Mac)。将打开位于DOM树底部的搜索栏。

输入 字符串、CSS选择器,或XPath选择器。

编辑DOM

动态编辑DOM树,并查看修改后的元素如何影响当前页面,在调试页面时会经常用到。

编辑内容

要编辑节点的内容,双击DOM树中的内容即可编辑。

编辑属性

要编辑属性,双击属性名称或值。

添加属性

双击选中元素,按右方向键,添加空格,键入 style="background-color:gold",然后按Enter,节点的属性会变成黄金色。

编辑节点类型

要编辑节点的类型,双击该类型,然后键入新类型。

重新排序DOM节点

拖动节点以重新排序它们。

Force状态

页面中通常会有很多css伪类(:active,:hover,:focus, :visited,:focus-within)。要调试这些样式,需要先在页面中选中元素,然后点选Style左边的:hov选项展开伪类列表。勾选所需的伪类。

隐藏节点

快速隐藏dom元素,在dom树中选中元素,按H键。该元素就会在页面中消失。再次按下H键,节点会再次出在页面中。

删除节点

在dom树中选中元素,按Delete键删除节点。

按Control+ Z或Command+ Z(Mac),撤消上一个操作,并重新显示该节点,可以连续撤消。

控制台中访问dom节点

DevTools提供了一些从控制台访问DOM节点或获取JavaScript引用的快捷方式。

在控制台中使用$0引用当前选定的dom节点,可以用变量接收dom节点,如:

a =$0

可以直接操作这些dom片段,用程序的方式或使用前后所介绍的方式。

存储为全局变量

如果需要多次使用一个dom节点,可以将其存储为全局变量。

在dom中选中节点,右键在弹出的菜单中选择[Store as global variable]。

在Console中输入temp1即可看到此变量引用的dom节点。

断点调试DOM

DevTools允许在JavaScript修改DOM时暂停页面的JavaScript。以观察DOM的变化过程。

Break on attribute modifications

如果要暂停导致节点属性发生变化的JavaScript,可以使用attribute modification breakpoints选项。

在DOM树中选中节点,右键选择[Break on] ->[attribute modification],对DOM节点加入断点。如果脚本修改此DOM节点时,会被加入的断点阻塞。也可通过这种方式给子节点加入断点[Break On] > [Subtree Modifications]。