先感慨一句, 一入前端深似海, 都是泪

经常要调前端样式, 有一些元素是只在鼠标悬停状态下才能显示, 那么, 怎么看和调试这些元素呢?

在 Chrome 等开发者工具里, 可以在 Element 那个选项卡右边的 Style 选项卡里点那个大头针图标, 将元素强制维持在 :hover 状态. 也可以在 Elements 左边的元素节点上点右键选状态

但这只是 CSS 上的搞法, 如果某个元素是 Javascript 悬浮事件弄出来的呢? 加 :hover 完全木用啊. 这时候可以用更奇葩的搞法: 暂停 Javascript 执行. 就是在开发者工具的 Sources 那个选项卡里, 调试 JS 那个地方有个暂停按钮, 按一下就好了

围观群众: 你特么一定是在逗我, 明明是鼠标悬停才能触发的事件, 鼠标一移开去点暂停键那不就没了悬停状态了么

当然了… 这时候是没法腾出手来按那个按钮的, 但是我们有快捷键啊, OS X 下是 F8 或 Cmd + \, 剩下的就不用过多解释了