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

user_177498 0
Viewed 562

I got to this complicated page, and a modal is in my way. I want to inspect an element that's obscured. I know I could walk the document tree in the elements tab, but is there some sort of "select under" option in 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>

web-inspector google-chrome-devtools google-chrome html
2 Answers

@xmanfly's solution didn't work for me. But I did figure out that I can add a css property to the modal to make it temporarily go away.

display: none;

Another option is to delete the modal element, but in this case I didn't want to. Either way I can inspect element, then undo (Ctrl-Z or Command-Z) to get the modal to show up after I inspect the target element.

user_1774980

Try adding aria-hidden="true" after <div class="modal", so then it would look like <div class="modal" aria-hidden="true">

user_140673760
Related