打开开发者工具
- 右键点击网页中的某个区域，选择“检查”（Inspect）或直接按
F12启用开发者工具。
选择节点选项
- 在开发者工具的右侧面板中，找到“选择节点”（Node Picker）选项，这个选项通常是一个小框,可能需要点击以激活。
点击网页
- 在网页中，点击你希望分析的节点（如一个链接、图像、输入框等），开发者工具会自动定位到该节点,并显示其相关信息。
查看节点信息
- 当节点被选中时，开发者工具会显示节点的 DOM 信息，包括：
- DOM 层级：节点在 DOM 树中的位置。
- 节点类型：如
<div>、<a>等标签。 - 节点属性：包括 ID、类、内联样式、属性等。
使用快捷键
- 按下
Ctrl + Shift + C（Windows/Linux）或Cmd + Shift + C（Mac），然后点击网页中的节点,快速激活节点选中功能。
切换节点
- 在已经选中一个节点后,你可以通过再次点击网页中的另一个节点来切换当前选中的节点。
移动节点
- 你可以使用方向键（← 或 →）在网页中移动已选中的节点,这样可以更直观地查看节点的位置和周围的内容。
关闭节点选中
- 点击页面的任意位置，或者按下
Esc键,可以退出节点选中模式。
查看详细信息
- 在节点选中模式下，点击节点会打开“元素”面板，显示更多详细信息，如 CSS 属性、布局信息等。
使用节点选中进行调试
- 节点选中功能在网页调试中非常有用，特别是在定位布局问题、检查元素交互性或分析动态内容加载等场景中。
通过以上步骤，你可以轻松使用 Chrome 的节点选中功能来分析网页结构和调试问题。
