Logotipo de Zephyrnet

Algunas características de DevTools para navegadores cruzados que quizás no conozca

Fecha:

Paso mucho tiempo en DevTools, y estoy seguro de que tú también. A veces, incluso salto entre ellos, especialmente cuando estoy depurando problemas entre navegadores. DevTools se parece mucho a los propios navegadores: no todas las características de las DevTools de un navegador serán las mismas o serán compatibles con las DevTools de otro navegador.

Pero hay bastantes características de DevTools que son interoperables, incluso algunas menos conocidas que estoy a punto de compartir con ustedes.

En aras de la brevedad, uso "Chromium" para referirme a todos los navegadores basados ​​en Chromium, como Chrome, Edge y Opera, en el artículo. Muchas de las DevTools en ellos ofrecen exactamente las mismas características y capacidades, por lo que esta es solo mi abreviatura para referirme a todos a la vez.

Buscar nodos en el árbol DOM

A veces, el árbol DOM está lleno de nodos anidados en nodos que están anidados en otros nodos, y así sucesivamente. Eso hace que sea bastante difícil encontrar exactamente el que está buscando, pero puede buscar rápidamente en el árbol DOM usando Cmd + F (macOS) o Ctrl + F (Windows)

Además, también puede buscar usando un selector de CSS válido, como .red, o usando un XPath, como //div/h1.

Capturas de pantalla de DevTools de los tres navegadores.
Búsqueda de texto en Chrome DevTools (izquierda), selectores en Firefox DevTools (centro) y XPath en Safari DevTools (derecha)

En los navegadores Chromium, el enfoque salta automáticamente al nodo que coincide con los criterios de búsqueda a medida que escribe, lo que podría resultar molesto si trabaja con consultas de búsqueda más largas o un árbol DOM grande. Afortunadamente, puede desactivar este comportamiento dirigiéndose a Ajustes (F1) → PreferenciasBuscarBuscar mientras escribeDeshabilitar.

Una vez que haya ubicado el nodo en el árbol DOM, puede desplazarse por la página para traer el nodo dentro de la ventana gráfica haciendo clic con el botón derecho en el nodo y seleccionando "Desplazarse a la vista".

Mostrar un nodo resaltado en una página web con un menú contextual abierto para desplazarse a la vista

Acceder a los nodos desde la consola

DevTools proporciona muchas formas diferentes de acceder a un nodo DOM directamente desde la consola.

Por ejemplo, puede utilizar $0 para acceder al nodo actualmente seleccionado en el árbol DOM. Los navegadores Chromium van un paso más allá al permitirle acceder a los nodos seleccionados en el orden cronológico inverso de la selección histórica usando, $1, $2, $3, etc.

Nodo actualmente seleccionado al que se accede desde la consola en Edge DevTools

Otra cosa que los navegadores Chromium le permiten hacer es copiar la ruta del nodo como una expresión de JavaScript en forma de document.querySelector haciendo clic derecho en el nodo y seleccionando CopiarCopiar ruta JS, que luego se puede usar para acceder al nodo en la consola.

Aquí hay otra forma de acceder a un nodo DOM directamente desde la consola: como una variable temporal. Esta opción está disponible haciendo clic derecho en el nodo y seleccionando una opción. Esa opción está etiquetada de manera diferente en las DevTools de cada navegador:

  • Cromo: Clic derecho → “Almacenar como variable global”
  • Firefox: Clic derecho → “Usar en consola”
  • Safari: Clic derecho → “Elemento de registro”
Captura de pantalla de los menús contextuales de DevTools en los tres navegadores.
Acceda a un nodo como una variable temporal en la consola, como se muestra en Chrome (izquierda), Firefox (centro) y Safari (derecha)

Visualiza elementos con insignias

DevTools puede ayudar a visualizar elementos que coinciden con ciertas propiedades al mostrar una insignia junto al nodo. Se puede hacer clic en las insignias y los diferentes navegadores ofrecen una variedad de insignias diferentes.

In Safari, hay un botón de insignia en la barra de herramientas del panel Elementos que se puede usar para alternar la visibilidad de insignias específicas. Por ejemplo, si un nodo tiene un display: grid or display: inline-grid declaración CSS aplicada a él, un grid la insignia se muestra junto a él. Al hacer clic en la insignia, se resaltarán las áreas de la cuadrícula, los tamaños de las pistas, los números de línea y más, en la página.

Una superposición de cuadrícula visualizada en la parte superior de una cuadrícula de tres por tres.
Superposición de cuadrícula con insignias en Safari DevTools

Las insignias que se admiten actualmente en FirefoxLas DevTools de se enumeran en Firefox documentos fuente.. Por ejemplo, un scroll insignia indica un elemento desplazable. Al hacer clic en la insignia, se resalta el elemento que causa el desbordamiento con un overflow insignia al lado.

Insignia de desbordamiento en Firefox DevTools ubicada en el panel HTML

In Cromo navegadores, puede hacer clic derecho en cualquier nodo y seleccionar "Configuración de la insignia..." para abrir un contenedor que enumera todas las insignias disponibles. Por ejemplo, elementos con scroll-snap-type tendrá un scroll-snap insignia junto a él, que al hacer clic, alternará el scroll-snap superposición en ese elemento.

Tomar capturas de pantalla

Hemos podido tomar capturas de pantalla de algunas DevTools desde hace un tiempo, pero ahora está disponible en todas ellas e incluye nuevas formas de tomar capturas de página completa.

El proceso comienza haciendo clic derecho en el nodo DOM que desea capturar. Luego, seleccione la opción para capturar el nodo, que tiene una etiqueta diferente según las DevTools que esté usando.

Captura de pantalla de DevTools en los tres navegadores.
Chrome (izquierda), Safari (centro) y Firefox (derecha)

Repita los mismos pasos en el html nodo para tomar una captura de pantalla de página completa. Sin embargo, cuando lo haga, vale la pena señalar que Safari conserva la transparencia del color de fondo del elemento: Chromium y Firefox lo capturarán como un fondo blanco.

Dos capturas de pantalla del mismo elemento, una con fondo y otra sin él.
Comparación de capturas de pantalla en Safari (izquierda) y Chromium (derecha)

¡Hay otra opción! Puede tomar una captura de pantalla "responsiva" de la página, lo que le permite capturar la página en un ancho de ventana específico. Como era de esperar, cada navegador tiene diferentes formas de llegar allí.

  • Cromo: Cmd + Shift + M (macOS) o Ctrl + Shift + M (Ventanas). O haga clic en el icono "Dispositivos" junto al icono "Inspeccionar".
  • Firefox: Herramientas → Herramientas del navegador → “Modo de diseño receptivo”
  • Safari: Desarrollar → “Ingresar al modo de diseño receptivo”
Ingrese las opciones de modo receptivo en DevTools para los tres navegadores.
Lanzamiento del modo de diseño receptivo en Safari (izquierda), Firefox (derecha) y Chromium (abajo)

Punta cromada: Inspeccione la capa superior

Chrome le permite visualizar e inspeccionar elementos de la capa superior, como un cuadro de diálogo, alerta o modal. Cuando se añade un elemento al #top-layer, se pone un top-layer insignia junto a él, que al hacer clic, lo lleva al contenedor de la capa superior ubicado justo después del </html> etiqueta.

El orden de los elementos en el top-layer contenedor sigue el orden de apilamiento, lo que significa que el último está en la parte superior. Haga clic en el reveal insignia para volver al nodo.

Consejo de Firefox: salta a ID

Firefox vincula el elemento que hace referencia al atributo ID con su elemento de destino en el mismo DOM y lo resalta con un subrayado. Usar CMD + Click (macOS) o CTRL + Click (Windows) )para saltar al elemento de destino con el identificador.

Terminando

Bastantes cosas, ¿verdad? Es increíble que haya algunas características increíblemente útiles de DevTools que son compatibles con Chromium, Firefox y Safari por igual. ¿Hay otras funciones menos conocidas compatibles con las tres que le gusten?

Hay algunos recursos que mantengo cerca para estar al tanto de las novedades. Pensé en compartirlos aquí:

punto_img

Información más reciente

punto_img