¿Cómo puedo inspeccionar un elemento bajo otro elemento en Chrome?

Llegué a esta página complicada, y un modal está en mi camino. Quiero inspeccionar un elemento que está oscuro. Sé que podría caminar el árbol de documentos en la pestaña elementos, pero ¿hay algún tipo de opción "seleccionar bajo" en 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;
}
this text element is what I want to inspect



  

    This modal is blocking me from inspecting what's underneath it

Pregunta hecha hace 3 años, 4 meses, 28 días - Por codeglitch

5 Respuestas:

  • La solución de @xmanfly no funcionó para mí. Pero descubrí que puedo añadir una propiedad de css al modal para hacerlo desaparecer temporalmente.

    display: none;

    Otra opción es eliminar el elemento modal, pero en este caso no quería. De cualquier manera puedo inspeccionar el elemento, luego deshacer (Ctrl-Z o Command-Z) para conseguir que el modal aparezca después de inspeccionar el elemento objetivo.

    Respondida el Dec 17, 2020 a las 20:29 - por csharpsorcerer

    Votos positivos: 0 | Votos negativos: 0

  • Intenta añadir aria-hidden="true" después

    , so then it would look like

    Respondida el Dec 17, 2020 a las 20:35 - por debugdynamo05ee

    Votos positivos: 0 | Votos negativos: 0

  • Mi solución es ocultar el elemento oscuro. Primero empezar por inspeccionar el elemento que está cubriendo el elemento que realmente desea inspeccionar. Luego en la pestaña elementos cromáticos, haga clic derecho en ese elemento y haga clic en ocultar. Ahora puede inspeccionar esa misma área e inspeccionar el elemento debajo. Cuando termines puedes deshacerte del elemento de cobertura.

    Sin embargo, en algunos casos el anterior no puede funcionar, como cuando un elemento tiene el estilo visibility: visible !important;. En ese caso necesitará añadir el estilo inline display: none para anular.

    Respondida el Dec 17, 2020 a las 20:45 - por codecanvas

    Votos positivos: 0 | Votos negativos: 0

  • En Chrome, puedes inspeccionar un elemento que está debajo de otro utilizando la función "Force Element State". Aquí te muestro los pasos:

    • Abre las herramientas de desarrollador de Chrome (F12 o clic derecho -> Inspeccionar).
    • Encuentra el modal que está en tu camino en la pestaña de elementos.
    • Haz clic derecho en el elemento del modal y selecciona "Force Element State" en el menú contextual.
    • En el submenú que se abre, selecciona "hover" para simular un estado de "hover" en el elemento.
    • Esto hará que el modal se comporte como si el cursor estuviera encima de él, permitiéndote inspeccionar los elementos debajo de él.

    Con estos pasos, podrás inspeccionar el elemento que está debajo del modal sin tener que navegar por el árbol de documentos en la pestaña de elementos.

    Respondida el Dec 18, 2020 a las 20:25 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Opción 1: Modo "Sobrescribir"

    Haz clic derecho en el elemento que bloquea (el modal en este caso). Selecciona "Inspeccionar". En el panel Herramientas para desarrolladores, haz clic en el botón "Sobrescribir" (icono de lápiz). Haz clic en el elemento que deseas inspeccionar debajo del elemento bloqueador.

    Opción 2: Selector ">>"

    En el panel Herramientas para desarrolladores, en la pestaña "Elementos", ubica el elemento que bloquea. En el campo del selector, agrega ">>" antes del selector del elemento que deseas inspeccionar. Por ejemplo:

    
.modal >> p

    Opción 3: Extensión de Chrome

    Instala la extensión "Page Elements Inspector" de Chrome Web Store. Una vez instalada, haz clic en el ícono de la extensión en la barra de herramientas de Chrome. Coloca el cursor sobre el elemento que bloquea y haz clic en "Inspeccionar elemento subyacente".

    Opción 4: Comando de consola

    Abre la consola de JavaScript (Ctrl + Shift + J / Cmd + Opt + J).

    • Ejecuta el siguiente comando:
    
document.querySelector('.modal').style.display = 'none';

    Esto ocultará temporalmente el elemento de bloqueo y te permitirá inspeccionar el elemento que se encuentra debajo.

    Respondida el Dec 18, 2020 a las 20:33 - por Gemini

    Votos positivos: 0 | Votos negativos: 0