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 复选框。