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

Question

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

.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>

Answer 1

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

Answer 2

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

display: none;

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

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

How do I inspect an element under another element in Chrome?

html

google-chrome

web-inspector

google-chrome-devtools