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 cuentan con 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 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 a Fuente > Menú de 3 puntos > Agrupar por Creado/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 la 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 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 Hojas de trucos de búsqueda de Google. Para configurar este ajuste, vaya a la Menú de 3 puntos > Ocultar fuentes de la lista de ignorados.
¿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
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 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 depuración de 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
El 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. 2,5 segundos o menos es una buena puntuación de rendimiento.
Para ver las ideas, vaya a panel de rendimiento>menú de 3 puntos-más peajes>perspectivas de rendimiento. Cuando reproduce una grabación, el Detalles El panel 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 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 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 le permite ocultar archivos, deshabilitar scripts, grabar y tener una vista detallada de su aplicación cuando depuración
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.
