1、按F12打开Edge开发者工具，点击“选择元素”图标或使用Ctrl+Shift+C快捷键激活元素选择功能，鼠标变为十字光标后可实时预览并高亮页面中的HTML元素。
如果您在使用Windows版Edge浏览器的开发者工具时，希望快速定位并高亮页面中的某个HTML元素，可以通过F12开发者工具实现精准选中。以下是具体操作方式。
本文运行环境：Surface Laptop 5，Windows 11
一、启用元素选择工具
通过F12打开开发者工具后，需切换到“元素”面板，并激活元素选择功能，以便鼠标能够实时捕捉页面上的HTML节点。
1、按下键盘上的 F12 键，打开Edge浏览器的开发者工具。
立即学习“前端免费学习笔记（深入）”；
2、点击工具栏上方的 “选择元素”图标（箭头指向方框），或使用快捷键 Ctrl + Shift + C 直接激活该功能。
3、此时鼠标变为十字光标，在网页上移动即可看到不同区域的HTML结构被实时预览高亮。
二、通过DOM树手动选中节点
若已知目标元素在HTML结构中的大致位置，可直接在DOM树中查找并选中对应节点，触发页面上的高亮显示。
1、在开发者工具的“元素”标签页中，浏览左侧的HTML结构树。
2、点击任意HTML标签节点，页面中对应的元素将被 蓝色半透明框高亮突出 显示。
3、双击标签内容可进行编辑，编辑完成后按 Enter 确认更改。
三、使用控制台命令定位元素
对于具备特定ID、类名或属性的元素，可通过JavaScript命令在控制台中快速获取并高亮显示目标节点。
1、切换到开发者工具的“控制台”面板。
2、输入如 document.querySelector('#example') 的查询语句，替换选择器为目标元素的实际标识。
3、执行命令后，可在控制台返回结果中右键点击输出的元素，选择“Scroll into view”或“Reveal in Elements Panel”实现高亮定位。
