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.

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) → Preferencias → Global → Buscar mientras escribe → Deshabilitar.

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

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.

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 Copiar → Copiar 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”

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.

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.

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.

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.

¡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”

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í:

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/