Google facilita la depuración con nuevas funciones en Devtools Chrome 106

La depuración puede ser tediosa e incluso más frustrante cuando no puede localizar fácilmente el error. Las herramientas para desarrolladores de Chrome 106 (devtools) están configuradas para simplificar el proceso de depuración, haciéndolo más fácil y rápido.

Ahora puede ordenar fácilmente los archivos, optimizar su búsqueda, ocultar scripts de terceros, acceder a informes de rendimiento detallados y mucho más que se analiza en este artículo. Estas herramientas de desarrollo son esenciales, especialmente para los desarrolladores que trabajan con marcos de JavaScript como Angular, React y Vue.js, que ahora tienen una consola interactiva y simplificada para visualizar y depurar su código.

Echemos un vistazo más de cerca a algunas de estas nuevas características:

Para beneficiarse plenamente de las nuevas actualizaciones de Chrome 106, descargue las versiones Chrome Canary, Dev o Beta como su navegador de desarrollo predeterminado. Tendrá acceso a las últimas herramientas de desarrollador que permiten probar las API de la plataforma web e identificar rápidamente problemas o errores en su sitio para garantizar que sus usuarios tengan la mejor experiencia de cliente.

Ahora puede navegar directamente a los componentes de su aplicación agrupando los archivos creados/implementados en el panel de origen . Vaya a Fuente > Menú de 3 puntos > Agrupar por autor/implementado. Ahora, cuando abre los archivos, solo puede ver sus archivos implementados en el panel.

En versiones anteriores de Chrome, todos los archivos de código fuente estaban visibles en el panel de navegación, lo que dificultaba encontrar un solo archivo.

2 Búsqueda de archivos simplificada

Puede restringir su búsqueda en el panel de origen a solo archivos relevantes. En versiones anteriores de Chrome, los archivos generados por el marco y otros terceros aparecían en los resultados de búsqueda, lo que dificultaba la identificación del elemento de búsqueda.

Esta actualización es la versión de devtools para optimizar su búsqueda en navegadores web con las hojas de trucos de búsqueda de Google. Para configurar esta configuración, vaya al menú de 3 puntos > Ocultar fuentes de la lista de ignorados.

3 Ocultar scripts de terceros

¿Scripts de terceros que llenan su consola? Chrome 106 agregó una extensión de lista de ignorados en el mapa de origen para permitirle ocultar scripts generados automáticamente por marcos y otros terceros.

Para activar esta función, vaya a Configuración > Lista de ignorados > Agregar automáticamente scripts de terceros conocidos a la lista de ignorados. Cuando vuelva a abrir los archivos, la consola mostrará solo los archivos relevantes asociados con su aplicación. Ahora puede ver su código sin distracciones.

4 seguimientos de pila detallados

Tardará menos en identificar un error en la consola, gracias a una nueva función en Chrome 106. Las herramientas para desarrolladores de Chrome le brindan una vista detallada de las operaciones asincrónicas y sus causas principales. En versiones anteriores, solo eran visibles los eventos que dieron lugar a la operación. Las últimas herramientas de desarrollo muestran toda la cadena de operaciones y sus causas principales.

Google ha configurado un método console.createTask() en Chrome 106. Este método permite que los marcos realicen seguimientos de pila en la consola. Depurar JavaScript usando devtools es tan fácil como depurar CSS usando Chrome.

5 Interacciones de pistas en el panel de rendimiento

Realice un seguimiento de las nuevas interacciones en el panel Rendimiento para identificar posibles problemas de capacidad de respuesta a su aplicación. En Chrome 106, todas las interacciones se muestran en la pista Interacciones después de una operación. La pista muestra el origen de las interacciones y sus ID. El seguimiento ayuda a identificar la fuente e interceptarla en consecuencia.

6 Perspectivas de sincronización de LCP en el panel de rendimiento

Los detalles de tiempo de la pintura con contenido más grande (LCP) ahora están disponibles en el panel de información de rendimiento. LCP es una métrica vital de rendimiento web que informa sobre el tiempo de procesamiento que tardan las imágenes o los bloques de texto en cargarse en la página web. 2,5 segundos o menos es una buena puntuación de rendimiento.

Para ver la información, vaya al panel de rendimiento>menú de 3 puntos-más peajes>perspectivas de rendimiento. Cuando reproduzca una grabación, el panel Detalles mostrará los tiempos de carga.

Actualizaciones adicionales en Chrome 106

Otras mejoras de Chrome 106 incluyen:

• Puede exportar sus grabaciones de guiones sin problemas desde el panel Grabadora . El botón exportar tenía un problema en versiones anteriores.
• Ahora tiene un selector de color en los elementos SVG del panel Estilos .
• Puede identificar las secuencias de comandos que distorsionan su diseño en el panel Perspectivas de rendimiento .
• Puede mostrar las rutas de las fuentes web LCP en el panel Perspectivas de rendimiento .

Estas características pueden mejorar la forma en que utiliza las herramientas de desarrollo del navegador.

Lo que obtienes de Chrome 106

Las últimas mejoras a las herramientas de desarrollo en Chrome 106 hacen que el proceso de depuración sea más rápido. Las nuevas actualizaciones facilitan la visualización de las operaciones a través de una consola simplificada y dinámica que te permite ocultar archivos, deshabilitar scripts, grabar y tener una visión en profundidad de tu aplicación al momento de depurar.

Las adiciones de Chrome 106 le permitirán administrar su aplicación y optimizar su rendimiento. Continúe y disfrute de estos beneficios actualizando a la última versión de Chrome 106.