Chrome浏览器devtools使用系列一：Elements

本文讲解的版本信息如下，如果使用的版本和讲解的版本差距过大，可能会有不同的地方。

系统	Window 11
Chrome 版本	125.0.6422.142（正式版本）
dev tools 语言	英文

查看页面结构

查看页面解析后的DOM结构（包含JS动态追加的DOM）

查看页面的原始结构

在页面上右键选择倒数第二个【查看网页源代码】

点击后会打开一个新的窗口

定位DOM节点节点的位置

通过页面定位DOM节点在DOM结构中的位置

Elements 左上角的小图标就可以在页面上选择DOM节点了，选中的DOM节点会自动在DOM结构中定位位置。

鼠标放置在DOM节点上不动也可以看到一些信息

页面上点击右键定位DOM节点在DOM结构中的位置

在想查看DOM结构的DOM节点上右键点击检查也可以定位DOM节点在DOM结构中的位置

通过DOM结构定位DOM节点在页面上的位置

滚动DOM节点到视口

DOM节点上右键选择【Scroll into view】，页面会滚动到DOM节点的位置（让DOM节点出现在视口）

搜索DOM节点

在DOM结构区域按Ctrl + F开启搜索框，可以按字符串、CSS 选择器或 XPath 选择器搜索 DOM 树。

PS：默认情况下，会在输入搜索条件的同时实时搜索。（可以通过设置，仅在回车的时候进行搜索）

Settings > Preferences > Global > Search as your type 复选框。

复制DOM节点的一些路径

在右键菜单【Copy】中可以复制一些路径，以下面DOM树为例

【Copy】=》【Copy selector】	body > div > div
【Copy】=》【Copy JS path】	document.querySelector("body > div > div")
【Copy】=》【Copy Xpath】	/html/body/div/div
【Copy】=》【Copy full Xpath】	/html/body/div/div

查看DOM节点的层级

可以在下面查看到选中DOM节点的路径，也可以直接在dom结构中查看选中DOM节点的具体层级关系

收起展开DOM层级

展开一层

收起一层

展开全部子节点

DOM节点上右键选择【Expand recursively】，展开所有子DOM节点

收起全部子DOM节点

DOM节点上右键选择【Collapse children】，收起所有子DOM节点

DOM节点存储为临时变量

选择的DOM节点后面会有一个$0

通过在控制台（Console）打印$0

也可以在DOM节点上右键选择【Store as global variable】存储一个临时的全局变量

点击【Store as global variable】后会自动弹出Console（控制台），并自动打印创建的临时变量

编辑DOM节点

复制粘贴（或者剪切粘贴）

选中DOM节点后，Ctrl + C （剪切是Ctrl + X）

然后选择一个父节点后 Ctrl + V （DOM节点会被粘贴为父节点的最后一个子节点（追加操作））

PS：鼠标右键菜单中也有对应的复制粘贴操作

【Cut】为剪切

【Paste】为粘贴

【Copy】=》【Copy element】 为复制

【Copy】=》【Copy outerHtml】为复制

暂时没发现  【Copy element】  和 【Copy outerHtml】 的区别      

删除DOM节点

在DOM节点上右键选择【Delete element】

隐藏DOM节点

在DOM节点上右键选择【Hide element】，可以选择/取消DOM节点隐藏

PS：会自动添加一个visibility：hidden ! important

更新DOM节点上的属性

在DOM节点上右键选择【Add attribute】，可以为DOM节点添加一个属性

可以将鼠标放在DOM节点的属性上，右键选择【Edit attribute】进行属性编辑。

也可以双击现有属性进行编辑（将编辑框中文本删除则相当于删除了该属性）

更新DOM节点的内容

双击内容区，进入编辑状态

更新DOM节点的标签名

双击DOM标签名，进入编辑状态

查看编辑DOM节点的样式信息

查看DOM节点的样式信息（Styles Tab页）

样式继承-Inherited from <element-name>（Styles Tab页）

代表DOM节点从父级继承来的样式，以下图为例

font-size	常规颜色	被子DOM节点继承
font-weight	中划线	虽然被继承，但样式被覆盖
height	浅色	没有被子DOM节点继承

通过盒子模型修改宽高等信息（Styles Tab页）

通过双击盒子模型区域的数字对属性值进行修改，修改后的属性值会实时更新

查看简写样式（Styles Tab页）

有些CSS样式是多个CSS样式共同组成的（比如margin是由 margin-top，margin-right，marign-bottom，margin-left组成），可以查看这个简写样式的组成

修改DOM节点的样式（Styles Tab页）

双击括号中可以对CSS样式进行增删改操作

修改DOM节点的Class（Styles Tab页）

可以动态的增删改DOM节点上的class

为DOM节点追加伪类效果（Styles Tab页）

在调试样式的时候有时候想触发DOM节点的一些效果（如鼠标悬停，获得焦点等），可以通过勾选对应的效果来模拟。

模拟DOM节点处在focus状态（Styles Tab页）

Emulate a focused page 可以让你选中的DOM节点永远处在获取焦点状态（正常鼠标点击其他位置获取焦点状态会被取消），可以方便你调试某些必须在获取焦点的状态才能调试样式。

PS：只有在devtools的区域才生效，如果你在页面上点击，焦点状态一样会被取消

查看DOM节点最终计算的样式结果（Computed Tab页）

以下是样式在该DOM节点上最终生效的结果（相同样式的覆盖优先级，和一些属性的计算（比如red颜色被转换成 rgb(255,0,0), rem, em 等被转换为 px））

可以定位到具体生效的代码位置

计算属性默认只显示生效的属性（浏览器默认属性，继承的属性，设置的属性），可以通过勾选Show all显示所有的属性，同时通过勾选Group对属性进行分组。

查看编辑DOM节点的属性（Properties Tab页）

Properties Tab页中显示了该DOM节点中所有的属性（js 对象）

其中上方的搜索框可以快速地对这些属性进行搜索，搜索框右边的【Show all】可以显示那些值为NULL或undefined的属性

查看DOM节点的事件

查看选中DOM节点绑定的事件

可以看到选中的元素上绑定了一个click事件，通过点击【Remove】可以移除这个事件

跳转到事件源码

也可以通过右键菜单选择【Reveal in Sources panel】跳转到对应源码

会自动跳转到源代码的位置

PS：有些框架的源代码追踪并不好用（比如VUE，因为他的事件是在VUE中绑定的，所以不会跳转到源代码中，而是VUE绑定事件的代码中）

去掉Framework listeners后在跳转源码的时候不会跳转到框架代码中，而是跳转到业务绑定事件的代码中。

目前已知好用框架

jquery	支持
vue2 & vue3	不支持
react	不支持
angular	不支持

查看包括父节点的事件

勾选【Ancestors】可以查看该DOM节点所有祖宗节点的事件

并且通过鼠标移动到对应dom选择器上，可以导航到对应的DOM节点

查看事件信息

移除事件

点击【Remove移除事件】