Algunas funciones de DevTools multinavegador que quizás no conozcas | trucos CSS

Paso mucho tiempo en DevTools y estoy seguro de que tú también. A veces, incluso salto entre ellos, especialmente cuando depuro en diferentes 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 bastantes características de DevTools que son interoperables, incluso algunas menos conocidas que estoy a punto de compartir con ustedes.

Para abreviar, 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 ellos a la vez.

Buscar nodos en el árbol DOM

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

Además, también puede buscar utilizando un selector de CSS válido, como .redo usando 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 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 la Ajustes (F1) → preferencias → Global → Busca mientras escribes → Desactivar.

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

Acceder a los nodos desde la consola

DevTools proporciona muchas formas diferentes 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 al de la selección histórica usando $1, $2, $3etc.

Otra cosa que los navegadores Chromium le permiten hacer es copiar la ruta del nodo como una expresión de JavaScript del formulario document.querySelector haciendo clic derecho en el nodo y seleccionando una copia → Copie la 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 → “Guardar como variable global”
• Firefox: Clic derecho → “Usar en consola”
• Safari: Haga clic derecho → "Elemento de registro"

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

en Safarihay 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 display: grid o display: inline-grid Una declaración CSS adjunta, un grid junto a él se muestra una insignia. 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.

Insignias admitidas actualmente en FirefoxLas herramientas de desarrollo de DevTools se enumeran en Firefox documentos fuentepor ejemplo, un scroll insignia indica un elemento desplazable. Al hacer clic en la insignia, se resalta el elemento que causa el desbordamiento, con overflow insignia al lado.

en 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, artículos con scroll-snap-type habrá una scroll-snap insignia junto a él, que al hacer clic alternará scroll-snap superposición en este elemento.

Tomar capturas de pantalla

Hemos podido tomar capturas de pantalla de algunas DevTools desde hace algún tiempo, pero ya está disponible en todas ellas e incluye nuevas formas de hacer fotos a toda página.

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 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 cierto ancho de la ventana gráfica. Como era de esperar, cada navegador tiene diferentes formas de llegar allí.

• cromo: Cmd + Shift + M (mac OS) o Ctrl + Shift + M (Ventanas). O haga clic en el icono "Dispositivos" junto al icono "Comprobar".
• Firefox: Herramientas → Herramientas del navegador → Modo de diseño receptivo
• Safari: Desarrollar → "Ingresar al modo de diseño receptivo"

Punta de cromo: revisa la capa superior

Chrome le permite obtener una vista previa e inspeccionar los elementos de la capa superior, como un cuadro de diálogo, una alerta o un modal. Cuando se agrega un elemento a #top-layerrecibe un top-layer insignia junto a él, que cuando se hace clic lo lleva al contenedor de la capa superior ubicado justo después </html> etiqueta.

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

Consejo de Firefox: ve a 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. CMD + Click (mac OS) o CTRL + Click (Windows) ) para pasar al elemento de destino con el identificador.

resumiendo

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

Hay algunos recursos que mantengo a mano para mantenerme actualizado. Decidí compartirlos aquí: