Novedades de DevTools: Edición multinavegador

Las herramientas para desarrolladores de navegadores siguen evolucionando, con funciones nuevas y mejoradas que se agregan todo el tiempo. Es difícil hacer un seguimiento, especialmente cuando se usa más de un navegador. Con tanta oferta, no sorprende que nos sintamos abrumados y utilicemos las funciones que ya conocemos en lugar de mantenernos al día con las novedades.

Sin embargo, es una pena, ya que algunos de ellos pueden hacernos mucho más productivos.

Por lo tanto, mi objetivo con este artículo es crear conciencia sobre algunas de las funciones más nuevas en Chrome, Microsoft Edge, Firefox y Safari. Con suerte, hará que desee probarlos y tal vez lo ayude a sentirse más cómodo la próxima vez que necesite depurar un problema específico del navegador.

Dicho esto, entremos de inmediato.

Herramientas para desarrolladores de Chrome

El equipo de Chrome DevTools ha estado trabajando arduamente para modernizar su base de código (que ahora tiene 13 años). Han estado ocupados mejorando el sistema de compilación, migrando a TypeScript, introduciendo nuevos componentes web, reconstruyendo su infraestructura de temas y mucho más. Como resultado, las herramientas ahora son más fáciles de ampliar y cambiar.

Pero además de este trabajo menos orientado al usuario, el equipo también envió muchas funciones. Permítanme repasar algunos de ellos aquí, relacionados con la depuración de CSS.

Ajuste de desplazamiento

CSS scroll-snapping ofrece a los desarrolladores web una forma de controlar la posición en la que un contenedor desplazable deja de desplazarse. Es una función útil para, por ejemplo, largas listas de fotos en las que desea que el navegador ubique cada foto ordenadamente dentro de su contenedor desplazable automáticamente para usted.

Si desea obtener más información sobre el ajuste de desplazamiento, puede leer esta documentación de MDN y echar un vistazo a las demostraciones de Adam Argyle aquí.

Las propiedades clave del ajuste de desplazamiento son:

• scroll-snap-type , que le dice al navegador la dirección en la que ocurre el ajuste y cómo ocurre;
• scroll-snap-align , que le dice al navegador dónde ajustar.

Chrome DevTools introdujo nuevas funciones que ayudan a depurar estas propiedades clave:

• si un elemento define ajuste de desplazamiento usando scroll-snap-type , el panel Elementos muestra una insignia junto a él.

• Puede hacer clic en la insignia de desplazamiento-chasquido para habilitar una nueva superposición. Cuando lo hace, se resaltan varias cosas en la página:
  • el contenedor de pergaminos,
  • los elementos que se desplazan dentro del contenedor,
  • la posición en la que se alinean los elementos (marcada con un punto azul).

Esta superposición facilita la comprensión de si las cosas encajan en su lugar y cómo después de desplazarse. Esto puede ser muy útil cuando, por ejemplo, sus elementos no tienen un fondo y los límites entre ellos son difíciles de ver.

Si bien el ajuste de desplazamiento no es una característica nueva de CSS, la adopción es bastante baja (menos del 4 % según chromestatus.com) y, dado que la especificación cambió, no todos los navegadores la admiten de la misma manera.

Espero que esta característica de DevTools haga que la gente quiera jugar más con ella y finalmente la adopte para sus sitios.

Consultas de contenedores

Si ha realizado algún tipo de desarrollo web en los últimos años, probablemente haya oído hablar de las consultas de contenedores. Ha sido una de las funciones de CSS más solicitadas durante mucho tiempo y ha sido un problema muy complejo de resolver para los fabricantes de navegadores y los escritores de especificaciones.

Si no sabe qué son las consultas de contenedor, le sugiero que consulte primero el artículo Primer sobre consultas de contenedor CSS de Stephanie Eckles.

En pocas palabras, son una forma de que los desarrolladores definan el diseño y el estilo de los elementos según el tamaño de su contenedor. Esta capacidad es una gran ventaja al crear componentes reutilizables, ya que podemos hacer que se adapten al lugar en el que se usan (en lugar de solo adaptarse al tamaño de la ventana gráfica para la que son buenas las consultas de medios).

Afortunadamente, las cosas se están moviendo en este espacio y Chromium ahora admite consultas de contenedores y el equipo de Chrome DevTools ha comenzado a agregar herramientas que facilitan comenzar con ellas.

Las consultas de contenedores aún no están habilitadas de forma predeterminada en Chromium (para habilitarlas, vaya a chrome://flags y busque "consultas de contenedores"), y es posible que tarden un poco en estarlo. Además, el trabajo de DevTools para depurarlos aún está en sus inicios. Pero algunas de las primeras características ya han aterrizado.

• Al seleccionar un elemento en DevTools que tiene estilos provenientes de una regla @container , esta regla aparece en la barra lateral Estilos del panel Elementos. Esto es similar a cómo se presentan los estilos de consultas de medios en DevTools y facilitará saber de dónde proviene un determinado estilo.

Como muestra la captura de pantalla anterior, la barra lateral Estilos muestra 2 reglas que se aplican al elemento actual. El inferior se aplica al elemento .media en todo momento y proporciona su estilo predeterminado. Y el superior está anidado en una consulta de contenedor @container (max-width:300px) que solo tiene efecto cuando el contenedor es más estrecho que 300 px.

• Además de esto, justo encima de la regla @container , el panel Estilos muestra un enlace al elemento que resuelve la regla y, al pasar el mouse sobre él, se muestra información adicional sobre su tamaño. De esta manera, sabrá exactamente por qué coincidió la consulta del contenedor.

El equipo de Chrome DevTools está trabajando activamente en esta característica y puede esperar mucho más en el futuro.

Colaboración de cromo

Antes de entrar en funciones que tienen otros navegadores, hablemos un poco sobre Chromium. Chromium es un proyecto de código abierto sobre el que se basan Chrome, Edge, Brave y otros navegadores. Significa que todos estos navegadores tienen acceso a las funciones de Chromium.

Dos de los colaboradores más activos de este proyecto son Google y Microsoft y, cuando se trata de DevTools, colaboraron en algunas características interesantes que me gustaría repasar ahora.

Herramientas de depuración de diseño CSS

Hace unos años, Firefox innovó en este espacio y envió los primeros inspectores grid y flexbox. Los navegadores basados ​​en Chromium ahora también permiten a los desarrolladores web depurar grid y flexbox fácilmente.

Este proyecto colaborativo involucró a ingenieros, gerentes de productos y diseñadores de Microsoft y Google, trabajando hacia un objetivo común (obtenga más información sobre el proyecto en sí en mi charla BlinkOn).

Entre otras cosas, DevTools ahora tiene las siguientes funciones de depuración de diseño:

• Resalte varios diseños de cuadrícula y flexibles en la página y personalícelos si desea ver nombres o números de líneas de cuadrícula, áreas de cuadrícula, etc.

• Editores flexibles y de cuadrícula para jugar visualmente con las diversas propiedades.

• Los iconos de alineación en el autocompletado de CSS facilitan la elección de propiedades y valores.

• Resalte el cursor sobre la propiedad para comprender a qué partes de la página se aplica una propiedad.

Puede leer más información sobre esto en los sitios de documentación de Microsoft y Google.

Localización

Este fue otro proyecto de colaboración entre Microsoft y Google que, ahora, hace posible que todas las DevTools basadas en Chromium se traduzcan a otros idiomas además del inglés.

Originalmente, nunca hubo un plan para localizar DevTools, lo que significa que fue un gran esfuerzo. Implicaba revisar todo el código base y hacer que las cadenas de la interfaz de usuario fueran localizables.

Aunque el resultado valió la pena. Si el inglés no es su primer idioma y se siente más cómodo usando DevTools en otro diferente, diríjase a Configuración ( F1 ) y busque el menú desplegable de idioma.

Aquí hay una captura de pantalla de cómo se ve en Chrome DevTools:

Y así es como se ve Edge en japonés:

Herramientas de desarrollo perimetral

Microsoft cambió a Chromium para desarrollar Edge hace más de 2 años. Si bien, en ese momento, provocó muchas discusiones en la comunidad web, no se ha escrito ni dicho mucho al respecto desde entonces. Sin embargo, las personas que trabajan en Edge (incluidas sus DevTools) han estado ocupadas y el navegador ahora tiene muchas características únicas.

Estar basado en el proyecto de código abierto Chromium significa que Edge se beneficia de todas sus funciones y correcciones de errores. En términos prácticos, el equipo de Edge ingiere los cambios realizados en el repositorio de Chromium en su propio repositorio.

Pero durante el último año, el equipo comenzó a crear funcionalidades específicas de Edge basadas en las necesidades de los usuarios de Edge y sus comentarios. Edge DevTools ahora tiene una serie de características únicas que repasaré.

Abrir, cerrar y mover herramientas

Con casi 30 paneles diferentes, DevTools es una pieza de software realmente complicada en cualquier navegador. Pero, en realidad, nunca necesita acceder a todas las herramientas al mismo tiempo. De hecho, cuando inicia DevTools por primera vez, solo se ven unos pocos paneles y puede agregar más más adelante.

Sin embargo, por otro lado, es difícil descubrir los paneles que no se muestran de forma predeterminada, incluso si podrían serle realmente útiles.

Edge agregó 3 características pequeñas pero potentes para abordar esto:

• un botón de cierre en las pestañas para cerrar las herramientas que ya no necesita,
• un botón + (más) al final de la barra de pestañas para abrir cualquier herramienta,
• una opción de menú contextual para mover las herramientas.

El siguiente GIF muestra cómo se pueden hacer en Edge las herramientas de cierre y apertura tanto en el área principal como en el cajón.

También puede mover herramientas entre el área principal y el área del cajón:

• al hacer clic con el botón derecho en una pestaña en la parte superior, se muestra un elemento "Mover a la parte inferior", y
• al hacer clic con el botón derecho en una pestaña del cajón se muestra un elemento "Mover al principio".

Obtención de ayuda contextual con la información sobre herramientas de DevTools

Es difícil tanto para los principiantes como para los desarrolladores experimentados saber todo acerca de DevTools. Como mencioné antes, hay tantos paneles que es poco probable que los conozcas todos.

Para abordar esto, Edge agregó una forma de ir directamente de las herramientas a su documentación en el sitio web de Microsoft.

Esta nueva función de información sobre herramientas funciona como una superposición alternable que cubre las herramientas. Cuando está habilitado, los paneles se resaltan y se proporciona ayuda contextual para cada uno de ellos, con enlaces a la documentación.

Puede iniciar la información sobre herramientas de 3 maneras diferentes:

• usando el atajo de teclado Ctrl + Shift + H en Windows/Linux ( Cmd + Shift + H en Mac);
• yendo al menú principal ( ... ), luego yendo a Ayuda y seleccionando "Alternar la información sobre herramientas de DevTools";
• utilizando el menú de comandos y escribiendo "Información sobre herramientas".

Personalización de colores

En los entornos de edición de código, a los desarrolladores les encanta personalizar sus temas de color para que el código sea más fácil de leer y más agradable de ver. Debido a que los desarrolladores web también pasan una cantidad considerable de tiempo en DevTools, tiene sentido que también tenga colores personalizables.

Edge acaba de agregar varios temas nuevos a DevTools, además de los temas oscuros y claros ya disponibles. Se agregaron un total de 9 nuevos temas. Estos provienen de VS Code y, por lo tanto, serán familiares para las personas que usan este editor.

Puede seleccionar el tema que desea usar yendo a la configuración (usando F1 o el icono de engranaje en la esquina superior derecha), o usando el menú de comandos y escribiendo theme .

Herramientas de desarrollo de Firefox

Al igual que el equipo de Chrome DevTools, la gente que trabaja en Firefox DevTools ha estado ocupada con una gran actualización de la arquitectura destinada a modernizar su base de código. Además, su equipo es un poco más pequeño en estos días ya que Mozilla tuvo que reenfocarse en los últimos tiempos. Pero, a pesar de que esto significa que tuvieron menos tiempo para agregar nuevas funciones, lograron lanzar algunas realmente interesantes que repasaré ahora.

Depuración de barras de desplazamiento no deseadas

¿Alguna vez te has preguntado: “¿de dónde viene esta barra de desplazamiento?” Sé que tengo, y ahora Firefox tiene una herramienta para depurar este mismo problema.

En el panel Inspector, todos los elementos que se desplazan tienen una insignia de scroll junto a ellos, lo que ya es útil cuando se trata de árboles DOM profundamente anidados. Además de esto, puede hacer clic en esta insignia para revelar el elemento (o elementos) que hicieron que apareciera la barra de desplazamiento.

Puedes encontrar más documentación al respecto aquí.

Visualización del orden de tabulación

Navegar por una página web con el teclado requiere usar la tecla de tab para moverse a través de los elementos enfocables uno por uno. El orden en que los elementos enfocables se enfocan al usar la tab es un aspecto importante de la accesibilidad de su sitio y un orden incorrecto puede confundir a los usuarios. Es especialmente importante prestar atención a esto, ya que las modernas técnicas CSS de diseño permiten a los desarrolladores web reorganizar elementos en una página muy fácilmente.

Firefox tiene un útil panel Inspector de accesibilidad que brinda información sobre el árbol de accesibilidad, encuentra e informa varios problemas de accesibilidad automáticamente y te permite simular diferentes deficiencias de la visión del color.

Además de estas características, el panel ahora proporciona una nueva superposición de página que muestra el orden de tabulación de los elementos enfocables.

Para habilitarlo, use la casilla de verificación "Mostrar orden de tabulación" en la barra de herramientas.

Puedes encontrar más documentación al respecto aquí.

Una nueva herramienta de rendimiento

No muchas áreas de desarrollo web dependen tanto de las herramientas como la optimización del rendimiento. En este dominio, el panel Rendimiento de Chrome DevTools es el mejor de su clase.

En los últimos años, los ingenieros de Firefox se han centrado en mejorar el rendimiento del navegador y, para ayudarlos a hacerlo, crearon una herramienta de análisis de rendimiento. La herramienta se creó originalmente para optimizar el código nativo del motor, pero también admitió el análisis del rendimiento de JavaScript desde el principio.

Hoy, esta nueva herramienta de rendimiento reemplaza el antiguo panel de rendimiento de Firefox DevTools en las versiones preliminares (Nightly y Developer Edition). Pruébalo cuando tengas la oportunidad.

Entre otras cosas, el nuevo generador de perfiles de Firefox admite compartir perfiles con otros para que puedan ayudarlo a mejorar el rendimiento de su caso de uso registrado.

Puede leer la documentación al respecto aquí y obtener más información sobre el proyecto en su repositorio de GitHub.

Inspector web de Safari

Por último, pero no menos importante, repasemos algunas de las funciones recientes de Safari.

El pequeño equipo de Apple se ha mantenido muy ocupado con una amplia gama de mejoras y correcciones en torno a las herramientas. Aprender más sobre Safari Web Inspector puede ayudarlo a ser más productivo al depurar sus sitios en dispositivos iOS o tvOS. Además, tiene un montón de características que otras DevTools no tienen y que mucha gente no conoce.

Depuración de cuadrícula CSS

Con Firefox, Chrome y Edge (y todos los navegadores basados ​​en Chromium) con herramientas dedicadas para visualizar y depurar cuadrículas CSS, Safari fue el último navegador importante que no tenía esto. Bueno, ¡ahora lo hace!

Básicamente, Safari ahora tiene las mismas características que las DevTools de otros navegadores en esta área. Esto es excelente porque significa que es fácil pasar de un navegador a otro y seguir siendo productivo.

• Las insignias de cuadrícula se muestran en el panel Elementos para encontrar cuadrículas rápidamente.
• Al hacer clic en la insignia, se alterna la superposición de visualización en la página.
• Ahora se muestra un nuevo panel Diseño en la barra lateral. Le permite configurar la superposición de la cuadrícula, ver la lista de todas las cuadrículas en la página y alternar la superposición para ellas.

Sin embargo, lo interesante de la implementación de Safari es que realmente han clavado el aspecto de rendimiento de la herramienta. Puede habilitar muchas superposiciones diferentes a la vez y desplazarse por la página sin que cause ningún problema de rendimiento.

La otra cosa interesante es que Safari introdujo un panel Elementos de 3 paneles, al igual que Firefox, que le permite ver el DOM, las reglas CSS para el elemento seleccionado y el panel Diseño, todo a la vez.

Obtenga más información sobre CSS Grid Inspector en esta publicación de blog de WebKit.

Una gran cantidad de mejoras del depurador

Safari solía tener un panel separado de Recursos y Depurador. Los han fusionado en un solo panel de Fuentes que hace que sea más fácil encontrar todo lo que necesita al depurar su código. Además, esto hace que la herramienta sea más consistente con Chromium, a la que mucha gente está acostumbrada.

La consistencia para las tareas comunes es importante en un mundo de navegadores cruzados. Los desarrolladores web ya necesitan probar en varios navegadores, por lo que si necesitan aprender un paradigma completamente nuevo cuando usan DevTools de otro navegador, puede hacer las cosas más difíciles de lo que deberían ser.

Pero Safari también se centró recientemente en agregar características innovadoras a su depurador que otras DevTools no tienen.

Guión de arranque:
Safari te permite escribir código JavaScript que se garantiza que se ejecutará antes que cualquiera de los scripts de la página. Esto es muy útil para instrumentar funciones integradas para agregar declaraciones de debugger o registro, por ejemplo.

Nuevas configuraciones de punto de interrupción:
Todos los navegadores admiten múltiples tipos de puntos de interrupción, como puntos de interrupción condicionales, puntos de interrupción DOM, puntos de interrupción de eventos y más.

Safari mejoró recientemente su conjunto completo de tipos de puntos de interrupción al brindarles una forma de configurarlos ampliamente. Con esta nueva función de punto de interrupción, puede decidir:

• si desea que un punto de interrupción solo llegue cuando una determinada condición sea verdadera,
• si desea que el punto de interrupción pause la ejecución, o simplemente ejecute algún código,
• o incluso reproducir un pitido de audio para que sepa que se ejecutó alguna línea de código.

funciones de consola queryInstances y queryHolders :
Estas dos funciones son realmente útiles cuando su sitio comienza a usar muchos objetos de JavaScript. En algunas situaciones, puede resultar difícil realizar un seguimiento de las dependencias entre estos objetos y también pueden comenzar a aparecer pérdidas de memoria.

Safari tiene una herramienta de memoria que puede ayudar a resolver estos problemas al permitirle explorar instantáneas del montón de memoria. Pero a veces ya sabes qué clase u objeto está causando el problema y quieres encontrar qué instancias existen o qué se refiere a él.

Si Animal es una clase de JavaScript en su aplicación, queryInstances(Animal) devolverá una matriz de todas sus instancias.

Si foo es un objeto en su aplicación, queryHolders(foo) devolverá una matriz de todos los demás objetos que tienen referencias a foo .

Pensamientos finales

Espero que estas características le sean útiles. Solo puedo recomendar usar varios navegadores y familiarizarse con sus DevTools. Estar más familiarizado con otras DevTools puede resultar útil cuando tiene que depurar un problema en un navegador que no usa con regularidad.

Sepa que las empresas que fabrican navegadores tienen equipos que trabajan activamente en DevTools. Están invertidos en hacerlos mejores, con menos errores y más potentes. Estos equipos dependen de sus comentarios para construir las cosas correctas. Sin escuchar los problemas que enfrenta o las características que le faltan, es más difícil para ellos tomar las decisiones correctas sobre qué construir.

Informar errores a un equipo de DevTools no solo lo ayudará cuando llegue la solución, sino que también puede ayudar a muchas otras personas que han enfrentado el mismo problema.

Vale la pena saber que los equipos de DevTools en Microsoft, Mozilla, Apple y Google suelen ser bastante pequeños y reciben muchos comentarios, por lo que informar un problema no significa que se solucionará rápidamente, pero ayuda, y esos equipos están escuchando .

Aquí hay algunas formas en que puede informar errores, hacer preguntas o solicitar funciones:

• Herramientas de desarrollo de Firefox
  • Firefox usa Bugzilla como su rastreador público de errores y cualquiera puede informar errores o solicitar nuevas funciones creando una nueva entrada allí. Todo lo que necesita es una cuenta de GitHub para iniciar sesión.
  • Puede ponerse en contacto con el equipo en Twitter utilizando la cuenta @FirefoxDevTools o iniciando sesión en el chat de Mozilla (encuentre documentación sobre el chat aquí).
• Inspector web de Safari
  • Safari también utiliza el seguimiento público de errores para sus errores de WebKit. Aquí hay documentación sobre cómo buscar errores e informar sobre nuevos.
  • También puede ponerse en contacto con el equipo en Twitter con @webkit.
  • Finalmente, también puede señalar errores sobre Safari y Safari Web Inspector utilizando el asistente de comentarios.
• Herramientas de desarrollo perimetral
  • La forma más fácil de informar un problema o solicitar una función es usar el botón de comentarios en DevTools (la pequeña figura de palo en la esquina superior derecha de las herramientas).
  • Hacer preguntas al equipo funciona mejor en Twitter mencionando la cuenta @EdgeDevTools.
• Herramientas para desarrolladores de Chrome
  • El equipo escucha los comentarios en la lista de correo de devtools-dev, así como en Twitter en @ChromeDevTools.
• Cromo
  • Dado que Chromium es el proyecto de código abierto que impulsa a Google Chrome y Microsoft Edge (y otros), también puede informar problemas en el rastreador de errores de Chromium.

Con eso, ¡gracias por leer!