如何仅对可见元素使用 chrome 的检查模式

Question

在 chrome 中使用 Ctrl+Shift+C inspect mode 真的很酷，但是当页面上有隐藏元素时，它会突出显示它们也可以选择（这不是问题），但您无法选择这些项目后面的可见项目。

我设法对元素选项卡上的那些项目使用了删除节点，然后我就可以选择我感兴趣的项目了。问题是某些逻辑可能依赖于隐藏的项目，然后我必须刷新页面以调试或检查任何内容。

我已经搜索了一个插件，它允许我只选择可见项目，但没有运气。是否有任何可配置的功能来实现该功能？

Answer 1

您可以将pointer-events:none; 样式添加到元素，以允许自己单击元素“后面”的元素。

有几种方法可以获得“不可见”框，包括但不限于具有visibility:hidden; 样式的元素或具有透明背景且尺寸超出其包含的元素的元素。在没有误报的情况下检测所有这些情况将是一个很大的挑战，因此获得所需结果的最简单方法是通过 CSS“样式”选项卡（右侧面板）手动设置 pointer-events:none;。

检查器中另一个有用的快捷方式是H。通过按 H，您将切换元素的可见性。这允许您在不将其从文档中删除的情况下直观地隐藏元素，例如如果你想调试一个被其他元素覆盖的元素。