Novedades de Herramientas para desarrolladores (Chrome 78)

Kayce Basques

Compatibilidad con varios clientes en el panel Audits

Ahora puedes usar el panel Audits junto con otras funciones de Herramientas para desarrolladores, como Request Bloqueo y Anulaciones locales

Por ejemplo, supongamos que el informe del panel Auditorías indica que la puntuación de rendimiento de tu página es de 70. y una de tus mayores oportunidades de rendimiento es la eliminación de los recursos que bloquean la renderización.

Figura 1: Es la puntuación inicial de Rendimiento.

Figura 2: El informe inicial indica que 3 secuencias de comandos que bloquean la renderización son un problema.

Ahora que puedes usar el panel Auditorías con el bloqueo de solicitudes, puedes medir cuánto afectan las secuencias de comandos que bloquean el procesamiento al rendimiento de la carga al bloquear primero la para las secuencias de comandos que bloquean la renderización:

Figura 3: Usa la pestaña Solicitar bloqueo para bloquear las secuencias de comandos problemáticas.

Luego, vuelve a auditar la página:

Figura 4: La puntuación de Rendimiento mejoró a 97 después de bloquear las secuencias de comandos problemáticas.

De forma alternativa, puedes usar Anulaciones locales para agregar atributos async a cada una de las secuencias de comandos. etiquetas, pero lo dejaremos como un ejercicio para el lector. Ve a la demostración para varios clientes para probarla. y sale de ella. O mira este tweet para ver una demostración en video.

Error de Chromium #991906

Depuración del controlador de pagos

La sección Servicios en segundo plano del panel Aplicación ahora es compatible con el Controlador de pagos. eventos.

1. Ve al panel Aplicación.
2. Abre el panel Controlador de pagos.

3. Haz clic en Grabar. Herramientas para desarrolladores registra los eventos del controlador de pagos durante 3 días, incluso cuando se usa Herramientas para desarrolladores cerrado.

   

   Figura 5: Se están registrando los eventos del controlador de pagos.

4. Habilita Mostrar eventos de otros dominios si tus eventos del Controlador de pagos ocurren en otro dominio. origen.

5. Después de activar un evento del controlador de pagos, haz clic en la fila del evento para obtener más información sobre él.

   

   Figura 6: Ver un evento del controlador de pagos

Problema de Chromium #980291

Lighthouse 5.2 en el panel Audits

El panel Auditorías ahora ejecuta Lighthouse 5.2. El nuevo diagnóstico de Uso de terceros te indica cuánto código de terceros se solicitó y durante cuánto tiempo se bloqueó ese código el subproceso principal mientras se cargaba la página. Consulta Optimiza tus recursos de terceros para obtener más información. sobre cómo el código de terceros puede disminuir el rendimiento de carga.

Figura 7: La auditoría Uso de terceros,

Problema de Chromium #772558

Largest Contentful Paint en el panel Performance

Cuando analices el rendimiento de carga en el panel Performance, aparecerá la sección Timing. incluye un marcador para Largest Contentful Paint (LCP). El LCP informa el tiempo de renderización de la elemento de contenido más grande visible en el viewport.

Figura 8: El marcador LCP en la sección Tiempos

Para destacar el nodo del DOM asociado con el LCP:

1. Haz clic en el marcador LCP en la sección Tiempos.

2. Coloca el cursor sobre Nodo relacionado en la pestaña Resumen para destacar el nodo en el viewport.

   

   Figura 9: La sección Nodo relacionado de la pestaña Resumen.

3. Haz clic en el Nodo relacionado para seleccionarlo en el árbol del DOM.

Archivo de problemas de Herramientas para desarrolladores desde el menú principal

Si alguna vez encuentras un error en Herramientas para desarrolladores y quieres informarlo, o si tienes una idea de cómo para mejorar las Herramientas para desarrolladores y quieres solicitar una función nueva, ve al Menú principal > Ayuda > Denunciar un Problema de Herramientas para desarrolladores para crear un problema en la herramienta de seguimiento del equipo de ingeniería de Herramientas para desarrolladores. Proporcionar un un ejemplo mínimo y reproducible sobre Glitch aumenta significativamente la capacidad del equipo para solucionar problemas. para informar el error o implementar la solicitud de función.

Ayuda > Reporta un problema de Herramientas para desarrolladores". ancho="800" altura="604">

Figura 10: Menú principal > Ayuda > Informa un problema de Herramientas para desarrolladores.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

• Para enviarnos sugerencias o comentarios, accede a crbug.com.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.