在网页上关注并显示当前关注的元素

Question

我想通过已部署的网页调试选项卡索引流。当前的css概述了：许多输入元素都没有。

使用chrome进行全局css覆盖的最佳方法是什么，这样我可以在浏览网站时清楚地看到所选/聚焦的元素？

Answer 1

检查页面上的元素（右键单击它并选择“inspect”），在元素选项卡中右键单击它，从列表中选择“：focus”，查看样式选项卡（应该已经打开）对于样式规则设置outline:none规则，取消选中所有outline:none样式旁边的复选框（您可能需要从多个规则中滚动或取消选中它们）。这将允许您在浏览器中查看默认大纲样式，而无需更改生产代码。每次打开页面进行测试时都必须重复这些步骤。

编辑：这些步骤应涵盖您需要执行此操作的大多数情况。如果您确实需要全局规则，也可以通过单击样式选项卡中的“+”图标并添加类似于*:focus{outline:initial !important}或类似的规则来添加该规则。