Novedades de Herramientas para desarrolladores (Chrome 78)

Kayce Basques

Compatibilidad con varias cuentas de cliente en el panel Auditorías

Ahora puedes usar el panel Audits en combinación con otras funciones de DevTools, como Request Blocking y Local Overrides.

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 que una de las mayores oportunidades de rendimiento es eliminar los recursos que bloquean la renderización.

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

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

Ahora que el panel Audits se puede usar en combinación con el bloqueo de solicitudes, puedes medir rápidamente cuánto afectan los secuencias de comandos que bloquean la renderización al rendimiento de carga. Para ello, primero bloquea las solicitudes de los secuencias de comandos que bloquean la renderización:

Figura 3: Usa la pestaña Bloqueo de solicitudes 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.

Como alternativa, puedes usar Invalidaciones locales para agregar atributos async a cada una de las etiquetas de secuencia de comandos, pero "dejaremos eso como ejercicio para el lector". 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 admite eventos de Payment Handler.

1. Ve al panel Aplicación.
2. Abre el panel Payment Handler.

3. Haz clic en Grabar. Las Herramientas para desarrolladores registran los eventos de Payment Handler durante 3 días, incluso cuando están cerradas.

   

   Figura 5: Registra eventos de Payment Handler.

4. Habilita Mostrar eventos de otros dominios si los eventos de tu Payment Handler se producen en un origen diferente.

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

   

   Figura 6: Visualización de un evento de Payment Handler

Error de Chromium #980291

Lighthouse 5.2 en el panel Audits

El panel Audits ahora ejecuta Lighthouse 5.2. La nueva auditoría de diagnóstico Uso de terceros te indica cuánto código de terceros se solicitó y durante cuánto tiempo ese código de terceros bloqueó el subproceso principal mientras se cargaba la página. Consulta Cómo optimizar tus recursos de terceros para obtener más información sobre cómo el código de terceros puede degradar el rendimiento de carga.

Figura 7: La auditoría de Uso por parte de terceros

Error de Chromium #772558

Largest Contentful Paint en el panel Rendimiento

Cuando analizas el rendimiento de carga en el panel Rendimiento, la sección Tiempos ahora incluye un marcador para Largest Contentful Paint (LCP). El LCP informa el tiempo de renderización del elemento de contenido más grande visible en el viewport.

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

Para destacar el nodo DOM asociado con el LCP, haz lo siguiente:

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

2. Coloca el cursor sobre el 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.

Cómo informar problemas de Herramientas para desarrolladores desde el menú principal

Si alguna vez encuentras un error en Herramientas para desarrolladores y quieres informar un problema, o si alguna vez tienes una idea para mejorar Herramientas para desarrolladores y quieres solicitar una nueva función, ve a Menú principal > Ayuda > Informa un problema de Herramientas para desarrolladores para crear un problema en el espacio de seguimiento del equipo de ingeniería de Herramientas para desarrolladores. Proporcionar un ejemplo mínimo reproducible aumenta drásticamente la capacidad del equipo para corregir tu error o implementar tu solicitud de función.

Ayuda > Informar un problema de Herramientas para desarrolladores". width="800" height="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 tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores