Algunas funciones de DevTools para navegadores que quizás no conozcas

Algunas funciones de DevTools para navegadores que quizás no conozcas |  consejos CSS

Paso mucho tiempo en DevTools, y estoy seguro de que tú también. A veces, incluso salto entre ellos, especialmente cuando depuro problemas entre navegadores. DevTools es muy similar a los propios navegadores: no todas las funciones de las DevTools de un navegador serán las mismas o serán compatibles con las DevTools de otro navegador.

Pero hay muchas funciones 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 que contienen ofrecen exactamente las mismas funciones y capacidades, por lo que esta es solo mi abreviatura para referirme a todas a la vez.

 

Encuentra nodos en el árbol DOM

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

Además, también puede buscar usando un selector de CSS válido, como .redo 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 puede ser molesto si está trabajando con consultas de búsqueda más largas o un árbol DOM grande. Afortunadamente, puede desactivar este comportamiento yendo a configuraciones (F1) → preferenciasGlobalBusca mientras escribesDesactivar.

Después de ubicar el nodo en el árbol DOM, puede desplazarse por la página para traer el nodo a 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 desplazar la vista

Acceder a los nodos desde la consola

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

Por ejemplo, puedes usar $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 orden cronológico inverso a la selección histórica usando, $1, $2, $3etc.

Nodo actualmente seleccionado accesible 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 JSque 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. Esta 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: Haga 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)

Ver artículos 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.

Dentro 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 O display: inline-grid declaración CSS aplicada a él, un grid la insignia se muestra al lado. 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, etc., 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

Insignias admitidas actualmente en Firefox Las DevTools se enumeran en la documentación fuente de Firefox. por ejemplo, un scroll insignia indica un elemento desplegable. Un clic en la insignia resalta el elemento que causa el desbordamiento con un overflow insignia al lado.

Insignia de desbordamiento en Firefox DevTools ubicada en el panel HTML

Dentro 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 este 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 fotos de página completa.

El proceso comienza con un clic derecho en el nodo DOM que desea capturar. Luego, seleccione la opción para capturar el nodo, que se etiqueta de manera diferente según las DevTools que esté utilizando.

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 haces esto, 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 hacer esto.

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

Sugerencia de Chrome: Inspeccione la capa superior

Chrome le permite ver e inspeccionar los elementos de la capa superior, como un cuadro de diálogo, una alerta o un modal. Cuando se agrega un elemento al #top-layerel obtiene un top-layer insignia junto a él, que al hacer clic lo lleva al contenedor de la capa superior 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. Pinchalo reveal insignia para volver al nodo.

Consejo de Firefox: acceda a la ID

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

Envoltura

Un montón de cosas, ¿verdad? Es genial que haya algunas características increíblemente útiles de DevTools que son compatibles con Chromium, Firefox y Safari. ¿Hay otras funciones menos conocidas compatibles con las tres que te gustan?

Hay algunos recursos que mantengo cerca para mantenerme al día con las novedades. Estaba pensando en compartirlos aquí:

Si quieres conocer otros artículos parecidos a Algunas funciones de DevTools para navegadores que quizás no conozcas puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas