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. Chrome 106 herramientas de desarrollo (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 en Chrome 106, descarga el Chrome Canario, desarrollador, o Beta versiones 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.

1. Archivos agrupados por creados/implementados

Ahora puede navegar directamente a los componentes de su aplicación agrupando archivos en creado/implementado sobre el fuente panel. Ir Fuente > 3-dot-menu > Agrupar por Autor/Implementado. Ahora, cuando abre los archivos, solo puede ver sus archivos implementados en el panel.

En anteriores Chrome versiones, todos los archivos de código fuente eran visibles en el navegación panel, lo que dificulta 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 Chromelos archivos generados por el marco y otros terceros se mostrarían en los resultados de búsqueda, lo que dificultaría 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 este ajuste, vaya a la 3-dot-menu > 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 característica, 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. Rastros de pila detallados

Le tomará menos tiempo identificar un error en la consola, gracias a una nueva función en Chrome 106. Chrome Las herramientas de desarrollo 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 fundamentales.

Google ha configurado un consola.createTask() método 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. Seguimiento de interacciones en el panel de rendimiento

Seguimiento de nuevas interacciones en el Actuación panel 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 Pintura con contenido más grande (LCP) Los detalles de tiempo ahora están disponibles en el panel de información sobre el rendimiento. LCP es una métrica vital de rendimiento web que informa sobre el tiempo de renderizado que tardan las imágenes o los bloques de texto en cargarse en la página web. A 20,5 segundos o menos es una buena puntuación de rendimiento.

Para ver las ideas, vaya a panel de rendimiento>3-dot-menu-more tolls>perspectivas de rendimiento. Cuando reproduce una grabación, el Detalles El panel mostrará los tiempos de carga.

Actualizaciones adicionales en Chrome 106

Otras mejoras a Chrome 106 incluyen:

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

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 en devtools 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.

Chrome Las adiciones de 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.