前言
前端开发过程中少不了Tootip，但是每次控制条调试自定义样式时都比较麻烦帮他调出来。所以在此记录一下常规的方法。
解决方案AI版
在 Chrome 开发者工具中调试需要 hover 才显示的 ToolTip 时，可以尝试以下几种方法：
方法一：强制元素状态（最简单）
- 打开开发者工具 (F12)
- 找到 ToolTip 的父元素或触发元素
- 在 Elements 面板中，右键点击该元素
- 选择 "Force state" → ":hover"
- 此时 ToolTip 会一直保持显示状态
方法二：使用控制台暂停（最常用）
- 打开开发者工具 (F12)
- 切换到 Sources 面板
- 在右侧找到 "Event Listener Breakpoints"
- 展开 "Mouse" 分类
- 勾选
mouseout事件 - 触发 ToolTip 显示，当鼠标移出时会自动暂停
- 切换到 Elements 面板，ToolTip 会保持显示
方法三：JavaScript 注入
在 Console 中输入：
// 阻止鼠标移出事件
document.addEventListener('mouseout', function(e) {
e.stopImmediatePropagation();
}, true);
// 或直接触发 hover 效果
document.querySelector('[触发元素选择器]').dispatchEvent(new Event('mouseenter'));
方法四：修改 CSS 强制显示
在 Elements 面板，为 ToolTip 元素添加样式：
/* 强制显示并固定在屏幕上 */
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: fixed !important;
top: 50px !important;
left: 50px !important;
z-index: 9999 !important;
方法五：使用断点调试
- 找到 ToolTip 显示/隐藏的 JavaScript 代码
- 在
mouseenter和mouseleave事件处理函数上设置断点 - 触发 ToolTip 后会暂停执行
- 可以在暂停状态下检查元素
方法六：Chrome 扩展工具
安装浏览器扩展如：
- Pesticide - 高亮所有元素
- CSS Peeper - 方便查看样式
小技巧
- 使用
Ctrl+Shift+C打开元素选择器模式 - 在 Elements 面板，按
Ctrl+F搜索 ToolTip 相关类名 - 使用
debugger;语句在 JS 中插入断点
推荐使用方法一，因为它最简单且不会影响页面其他功能，调试完成后只需取消强制状态即可。
我的解决办法
熟悉我的朋友知道，我最讨厌这种既复杂又没营养的方法了。看似回答的很棒棒，实则搞半天都难以实现自己的需求。尤其是第一种方式，是初入行的朋友们比较常用的方式，但大多时候都难以生效要到element里翻半天。
我知道还有朋友会说直接把 hover改为click，哪有这么多麻烦。诚然这也是我经常用的方式之一，但有时候会忘记改回来。
后来在工作中又发现一个非常简便的方法分享出来：
在控制台输入：
setTimeout(() => { debugger }, 2000)
然后把鼠标移到hover元素上，完美！！！ 反复调试的话就不停按鼠标上键重复运行即可，对代码完全没有插入性。
举一反三
通过这种方法不只是可以捕获toolTip，理论上只要在屏幕上显示的所有东西： 包括移入才显示出来的滚动条。
