学到一招 chrome 浏览器 debug 悬浮样式

前言

今天在想调试一个开源 UI 框架的某个table row的隔行换色的样式设置,发现这个颜色只有鼠标悬浮在row的时候才能拿到,但是想要拷贝 row 样式,鼠标必须离开悬浮区域,去chrome的debug控制台内才能拷贝,但是一离开悬浮区域,样式又消失了,顿时陷入了鸡生蛋的循环中。

通过在网上查找资料,发现有博客说可以在悬浮row上,右键单击,然后到鼠标移动到chrome debug区域在键盘中输入N就行了,经过几番尝试都以失败告终,也不知道那位小伙伴写的误人子弟的文章,可能是限制条件没说清楚,只能在某些特殊情况触发。

最终还得靠 google ,在 stackoverflow 上找到了通用的解决方法,链接参考:

css - See :hover state in Chrome Developer Tools - Stack Overflow

步骤

第一步

打开 chrome 控制台 按 F12 快捷键 或者 鼠标右击后选择检查,然后找到要查看的 table row

比如我这里因为已经开启了隔行换色,所以204是有颜色的,205需要悬浮上才能变色,如下:

第二步

点击定位元素的图标,然后选择205这一行的源码,接着点击右键 => 强制执行状态 => 勾选hover,勾选之后就可以固定这个样式了,即使任意移动这个悬浮样式也不会消失。

注意这个时候,要找谁的悬浮样式,就点击那个元素即可,推荐先点击 tr 看下,如果没有悬浮设置,就点击td继续看,因为有些时候最终样式是设置在子元素上,但是悬浮样式是设置在父元素上的,比如我这个案例就是在子元素上:

然后这个样式就是下面的这个:

复制代码
.ant-table-wrapper .ant-table-tbody >tr.ant-table-row:hover>td
相关推荐
天桥下的卖艺者17 小时前
R语言基于shiny开发随机森林预测模型交互式 Web 应用程序(应用程序)
前端·随机森林·r语言·shiny
技术钱18 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
路很长OoO18 小时前
Flutter 插件开发实战:桥接原生 SDK
前端·flutter·harmonyos
开水好喝18 小时前
Code Coverage Part I
前端
DoraBigHead19 小时前
🧭 React 理念:让时间屈服于 UI —— 从同步到可中断的演化之路
前端·javascript·面试
敢敢J的憨憨L19 小时前
GPTL(General Purpose Timing Library)使用教程
java·服务器·前端·c++·轻量级计时工具库
喝拿铁写前端19 小时前
Vue 组件通信的两种世界观:`.sync` 与普通 `props` 到底有什么不同?
前端·vue.js·前端框架
美酒没故事°20 小时前
npm源管理器:nrm
前端·npm·npm源
用户221520442780020 小时前
vue3组件间的通讯方式
前端·vue.js
三十_A20 小时前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug