Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 106)

Jecelyn Yeen

Agrupar archivos por Autor / Implementado en el panel de fuentes

Group files by authored / Deployed 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 (creado) y navegar a ellos más rápido.

Agrupar archivos por escrito / implementado

Error de Chromium: 1352488

Seguimientos de pila mejorados

Seguimientos de pila vinculados para operaciones asíncronas

Cuando algunas operaciones están programadas para ejecutarse de forma asíncrona, los seguimientos de pila en Herramientas para desarrolladores ahora cuentan la “historia completa” de la operación. Anteriormente, solo cuenta 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, Herramientas para desarrolladores ahora muestra que la operación se origina a partir del evento onClick en el componente del botón, luego la función increment y, a continuación, la operación de tiempo de espera.

Seguimientos de pila vinculados para operaciones asíncronas

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

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

Error de Chromium: 1334585

Ignorar automáticamente las secuencias de comandos conocidas de terceros

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

Abre esta demostración y haz clic en el botón para incrementar. 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 seguimiento de pila incluía secuencias de comandos de terceros, como zone.js y core.mjs. No son tu código fuente, sino que se generan mediante agrupadores (p.ej., webpack) o frameworks (p.ej., Angular). La identificación de la causa raíz de un error tardó más tiempo.

Ignorar automáticamente las secuencias de comandos de terceros conocidas en el seguimiento de pila

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

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

Parámetro de configuración para agregar automáticamente secuencias de comandos de terceros conocidas a la lista de elementos ignorados

Error de Chromium: 1323199

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

Con el parámetro Agregar automáticamente secuencias de comandos de terceros conocidas para ignorar la lista, la pila de llamadas ahora muestra solo 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 en la página para activar el punto de interrupción. La pila de llamadas solo muestra fotogramas de tu código (p.ej., app.component.ts y button.component.ts).

Para ver todos los marcos, habilita Mostrar los marcos que están en la lista de elementos ignorados. Anteriormente, Herramientas para desarrolladores mostraban todos los marcos de forma predeterminada.

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

Error de Chromium: 1352488

Oculta las fuentes que están en la lista de elementos ignorados en el panel de fuentes

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

Abre esta demostración. En el panel Fuentes, haz lo siguiente: 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.

Oculta las fuentes que están en la lista de elementos ignorados en el panel de fuentes

Error de Chromium: 1352488

Oculta los archivos de la lista de elementos ignorados en el menú de comandos

Con la configuración ocultar las fuentes de la lista de elementos ignorados, 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 ocultar las fuentes de la lista de elementos ignorados y haz clic en el menú de 3 puntos. Selecciona Abrir archivo. Escribe “ton” para buscar los componentes del botón. Anteriormente, los resultados incluían archivos de node_modules, uno de los archivos de node_modules que se mostraba como el primer resultado.

Oculta los archivos de la lista de elementos ignorados en el menú de comandos

Error de Chromium: 1336604

Nuevo segmento de interacciones en el panel Rendimiento

Usa el nuevo segmento Interacciones en el panel Rendimiento para visualizar las interacciones y hacer un seguimiento de los posibles problemas de capacidad de respuesta.

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

Seguimiento de interacciones en el panel Rendimiento

Error de Chromium: 1347390

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

En el panel Estadísticas de rendimiento, ahora se muestra el desglose de tiempos del Largest Contentful Paint (LCP). Usa esta información sobre los tiempos para identificar y comprender oportunidades para mejorar el rendimiento del LCP.

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

Error de Chromium: 1351735

Generar automáticamente el nombre predeterminado de las grabaciones en el panel de Grabadora

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

Nombre predeterminado de las grabaciones en el panel de Grabadora

Error de Chromium: 1351383

Otros aspectos destacados

Anteriormente, las extensiones de la grabadora no aparecían en el panel de la Grabadora ocasionalmente. (1351416).
El panel Estilos ahora muestra un selector de color para la propiedad stop-color del elemento SVG <stop>. (1351096).
En el panel de Estadísticas de rendimiento, identifica las secuencias de comandos que provocan la paginación excesiva del diseño como la posible causa raíz de los cambios de diseño. (1343019).
Muestra la ruta de acceso crítica para las fuentes web LCP en el panel Performance Insights. (1350390).

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).