Novedades de Herramientas para desarrolladores (Chrome 106)

Jecelyn Yeen

Agrupar archivos por autor / implementación en el panel Sources

Archivos de grupo 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 la configuración Agrupar archivos por autoría o implementación para ver primero tu código fuente original (autoría) y navegar a ellos más rápido.

Error de Chromium: 1352488

Seguimientos de pila mejorados

Seguimientos de pila vinculados para operaciones asíncronas

Cuando algunas operaciones se programan para que se ejecuten de forma asíncrona, los seguimientos de pila en DevTools 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 seguimiento de pila solo mostraba la operación de tiempo de espera. No mostró la “causa raíz” de la operación.

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

En segundo plano, las Herramientas para desarrolladores presentaron una nueva función de “etiquetado de pilas asíncronos”. Puedes contar la historia completa de la operación si vinculas 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.

¿Te parece 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, depende del framework usar la API, no te preocupes por eso. (p. ej., Angular implementó estos cambios).

Error de Chromium: 1334585

Ignora automáticamente las secuencias de comandos de terceros conocidas

Identifica los problemas en tu código más rápido durante la depuración, ya que DevTools 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 fotogramas para ver el seguimiento de pila completo.

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

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

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 elementos 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 la configuración Agregar automáticamente secuencias de comandos de terceros conocidas para ignorar la lista, la pila de llamadas ahora solo muestra los fotogramas que son 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 marcos de tu código (p.ej., app.component.ts y button.component.ts).

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

Error de Chromium: 1352488

Oculta las fuentes de la lista de elementos ignorados en el panel de fuentes

Habilita la opción para ocultar las fuentes incluidas en la lista de elementos ignorados para ocultar los archivos irrelevantes en el panel de navegación. De esta manera, podrás enfocarte solo en el 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 incluidas en la lista de elementos ignorados para ocultarlas del panel.

Error de Chromium: 1352488

Cómo ocultar archivos de la lista de elementos ignorados en el menú de comandos

Con la configuración para ocultar las fuentes incluidas en la lista de elementos ignorados, puedes encontrar el archivo más rápido con el menú de comandos. Anteriormente, la búsqueda de archivos en el menú de comandos mostraba archivos de terceros que podían no ser relevantes para ti.

Por ejemplo, habilita la opción Ocultar fuentes de la lista de fuentes ignoradas 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 ellos incluso aparecía como el primer resultado.node_modules

Error de Chromium: 1336604

Nuevo segmento Interacciones en el panel Rendimiento

Usa la nueva pista Interacciones en el panel Rendimiento para visualizar las interacciones y detectar posibles problemas de capacidad de respuesta.

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

Error de Chromium: 1347390

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

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

Error de Chromium: 1351735

Generar automáticamente un nombre predeterminado para las grabaciones en el panel de la grabadora

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

Error de Chromium: 1351383

Otros aspectos destacados

• Antes, las extensiones de la grabadora no aparecían en el panel de la Grabadora de vez en cuando. (1351416).
• El panel Estilos ahora muestra un selector de color para la propiedad stop-color del elemento SVG <stop>. (1351096).
• Identifica las secuencias de comandos que causan fragmentación del diseño como las posibles causas raíz de los cambios de diseño en el panel Estadísticas de rendimiento. (1343019).
• Muestra la ruta crítica de las fuentes web de 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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de DevTools con more_vert Más opciones > Ayuda > Informar un problema de DevTools en DevTools.
• Twittea a @ChromeDevTools.
• Deja comentarios en los videos de YouTube sobre las novedades de DevTools o en los videos de YouTube sobre sugerencias de DevTools.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.