无法用Chrome调试工具检查表单验证Tooltip，如何定位该HTML元素？

• 冻结页面执行抓状态：Tooltip弹出瞬间按下F8（调试工具暂停按钮），或者提前在Console输入setTimeout(() => debugger;, 3000)，点击提交后3秒自动暂停，就能固定Tooltip状态，在Elements面板里找到它。
• 追踪动态创建代码：在Sources面板搜索tooltip、createElement、appendChild这类关键词，或者项目用的UI库相关方法（比如tooltip()），找到创建Tooltip的逻辑，就能看到它的属性和挂载位置。
• 监听DOM变更断点：在Elements面板右键任意元素，选Break on -> Subtree modifications，触发Tooltip时页面会在元素创建瞬间暂停，直接查看新生成的Tooltip元素。
• 通过样式反向定位：如果Tooltip有独特样式（比如特定背景色），在Styles面板搜索样式值（如background: #ff4444），找到对应的CSS类名，再回Elements面板搜索该类名定位元素。
• 检查Shadow DOM：部分UI组件会把Tooltip放在Shadow DOM里，在调试工具设置（右上角三点→Settings）的Elements选项中，勾选Show user agent shadow DOM和Show shadow DOM，就能看到这部分元素。

内容的提问来源于stack exchange，提问作者Eloi Juszczak