如何检查 Chrome 中另一个元素下的元素？答案

【问题标题】：How do I inspect an element under another element in Chrome?如何检查 Chrome 中另一个元素下的元素？
【发布时间】：2021-03-28 13:28:16
【问题描述】：

我进入了这个复杂的页面，但有一个模式挡住了我的路。我想检查一个被遮挡的元素。我知道我可以在元素选项卡中遍历文档树，但是 Chrome 中是否有某种“选择下方”选项？

.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 4em;
  background: rgba(250, 250, 250, 0.5);
}

.modal-border {
  border: 4px solid #666;
}

<p>this text element is what I want to inspect</p>
<div class="modal">
  <div class="modal-border">
    This modal is blocking me from inspecting what's underneath it
  </div>
</div>

【问题讨论】：

如果您知道元素的名称或它应该显示的内容，您可以打开检查器并在 HTML 树中，使用 ctrl-f 或 cmd-f 找到您要查找的元素.否则，你的答案就是我的工作方式，删除一个元素，然后按 ctrl-z 或在树上行走，这有时会很痛苦。

标签： html google-chrome google-chrome-devtools web-inspector

【解决方案1】：

尝试在<div class="modal" 之后添加aria-hidden="true"，那么它看起来就像<div class="modal" aria-hidden="true">

【讨论】：

【解决方案2】：

@xmanfly 的解决方案对我不起作用。但我确实发现我可以向模态框添加一个 css 属性以使其暂时消失。

display: none;

另一个选择是删除模态元素，但在这种情况下我不想这样做。无论哪种方式，我都可以检查元素，然后撤消（Ctrl-Z 或 Command-Z）以在检查目标元素后显示模式。

【讨论】：