Novedades de Herramientas para desarrolladores (Chrome 106)

Jecelyn Yeen

Agrupa los archivos por escrito / implementado en el panel Sources

La opción Agrupar archivos por escrito / implementado ahora se muestra en el menú de 3 puntos. Anteriormente, se mostraba directamente en el panel de navegación.

Abre esta demostración. Habilita el parámetro de configuración Group files by Authored / Deployed para ver primero tu código fuente original (Authored) y navegar a él más rápido.

Error de Chromium: 1352488

Se mejoraron los seguimientos de pila

Seguimiento de pila vinculado para operaciones asíncronas

Cuando algunas operaciones se programan para que se realicen de forma asíncrona, los seguimientos de pila en Herramientas para desarrolladores ahora cuentan la “historia completa” de la operación. Anteriormente, solo contaba una parte de la historia.

Por ejemplo, abre esta demostración y haz clic en el botón de incremento. Expande el mensaje de error en Console. En nuestro código fuente, la operación incluye una operación timeout asíncrona.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

Anteriormente, el registro de seguimiento solo mostraba la operación de tiempo de espera. No se mostró la “causa raíz” de la operación.

Con los cambios más recientes, ahora DevTools muestra que la operación se origina en el evento onClick del componente del botón, luego la función increment y, por último, la operación de tiempo de espera.

En segundo plano, DevTools introdujo una nueva función de “Etiquetado de pila asíncrona”. Puedes contar toda la historia de la operación vinculando ambas partes del código asíncrono con el nuevo método console.createTask(). Consulta Depuración moderna en DevTools para obtener más información.

¿Suena complicado? En absoluto. La mayoría de las veces, el framework que usas controla la programación y la ejecución asíncrona. En ese caso, el framework usará la API, por lo que no tienes que preocuparte por eso. (p.ej., Angular implementó estos cambios)

Error de Chromium: 1334585

Ignorar automáticamente las secuencias de comandos de terceros conocidas

Identifica problemas en tu código más rápido durante la depuración, ya que Herramientas para desarrolladores ahora agrega automáticamente secuencias de comandos de terceros conocidas a la lista de elementos ignorados.

Abre esta demostración y haz clic en el botón de incremento. Expande el mensaje de error en Console. El seguimiento de pila solo muestra tu código (p.ej., app.component.ts button.component.ts). Haz clic en Mostrar más marcos para ver el seguimiento de pila completo.

Anteriormente, el registro de seguimiento de pila incluía secuencias de comandos de terceros, como zone.js y core.mjs. No son tu código fuente, sino que los generan los empaquetadores (p.ej., webpack) o los frameworks (p.ej., Angular). Se tardó más en identificar la causa raíz de un error.

En segundo plano, las Herramientas para desarrolladores ignoran las secuencias de comandos de terceros según la nueva propiedad x_google_ignoreList en los mapas de origen. Los frameworks y los bundlers deben proporcionar esta información. Consulta Caso de éxito: Mejor depuración de Angular con DevTools.

De manera opcional, si prefieres ver siempre los seguimientos de pila completos, puedes inhabilitar el parámetro de configuración en Configuración > Lista de ignorados > Agregar automáticamente secuencias de comandos de terceros conocidas para ignorar la lista.

Error de Chromium: 1323199

Se mejoró la pila de llamadas durante la depuración

Con el parámetro de configuración Agregar automáticamente secuencias de comandos de terceros conocidas para ignorar la lista, la pila de llamadas ahora solo muestra los marcos relevantes para tu código.

Abre esta demostración y establece un punto de interrupción en la función increment() en app.component.ts. Haz clic en el botón de incremento de la página para activar el punto de interrupción. La pila de llamadas solo muestra los marcos de tu código (p.ej., app.component.ts y button.component.ts).

Para ver todos los fotogramas, habilita Mostrar los fotogramas que están en la lista de elementos ignorados. Anteriormente, DevTools mostraba todos los fotogramas de forma predeterminada.

Error de Chromium: 1352488

Cómo ocultar las fuentes de la lista de elementos ignorados en el panel de fuentes

Habilita Ocultar las fuentes de la lista de elementos ignorados para ocultar los archivos irrelevantes en el panel Navegación. De esta manera, puedes enfocarte solo en tu código.

Abre esta demostración. En el panel Fuentes node_modules y webpack son las secuencias de comandos de terceros. Haz clic en el menú de 3 puntos y selecciona Ocultar las fuentes de la lista de ignorados para ocultarlas en el panel.

Error de Chromium: 1352488

Cómo ocultar los archivos que están en la lista de elementos ignorados en el menú de comandos

Con el parámetro de configuración hide ignore-listed sources, puedes encontrar tu archivo más rápido con el Menú de comandos. Anteriormente, cuando buscabas archivos en el Menú de comandos, se mostraban archivos de terceros que podrían no ser relevantes para ti.

Por ejemplo, habilita el parámetro de configuración hide ignore-listed sources y haz clic en el menú de 3 puntos. Selecciona Abrir archivo. Escribe “ton” para buscar componentes de botones. Anteriormente, los resultados incluían archivos de node_modules, y uno de los archivos de node_modules incluso aparecía como el primer resultado.

Error de Chromium: 1336604

Nuevo registro de interacciones en el panel Rendimiento

Usa el nuevo segmento Interactions en el panel Performance para visualizar las interacciones y detectar posibles problemas de respuesta.

Por ejemplo, inicia una grabación del rendimiento en esta página de demostración. Haz clic en un café y detén la grabación. En el segmento Interactions, se muestran dos interacciones. Ambas interacciones tienen los mismos IDs, lo que indica que se activan a partir de la misma interacción del usuario.

Error de Chromium: 1347390

Desglose de los tiempos del LCP en el panel Estadísticas de rendimiento

El panel de Performance Insights ahora muestra el desglose de los tiempos del Largest Contentful Paint (LCP). Usa esta información de tiempos para comprender e identificar una oportunidad para mejorar el rendimiento del LCP.

Error de Chromium: 1351735

Se genera automáticamente un nombre predeterminado para las grabaciones en el panel de la Grabadora.

El panel Recorder ahora genera automáticamente un nombre para las grabaciones nuevas.

Error de Chromium: 1351383

Otros aspectos destacados

• Anteriormente, las extensiones de la grabadora no aparecían en el panel de Grabadora de vez en cuando. (1351416)
• En el panel Estilos, ahora se muestra un selector de color para la propiedad stop-color del elemento <stop> de SVG. (1351096)
• Identifica las secuencias de comandos que causan layout thrashing como las posibles causas raíz de los cambios de diseño en el panel Performance Insights. (1343019)
• Muestra la ruta crítica de las fuentes web del LCP en el panel Estadísticas de rendimiento. (1350390)

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