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

Novedades de Herramientas para desarrolladores (Chrome 106)

Jecelyn Yeen

Agrupa los archivos por escrito / implementado 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 el parámetro de configuración Agrupar archivos por escrito / implementado para ver primero el código fuente original (autorizado) 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 realizarse de forma asíncrona, los seguimientos de pila en Herramientas para desarrolladores ahora cuentan la “historia completa” de la operación. Anteriormente, solo cuentan 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 la consola. 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, las Herramientas para desarrolladores ahora muestran 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.

Seguimientos de pila vinculados para operaciones asíncronas

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 Herramientas para desarrolladores para obtener más información.

¿Te parece complicado? En absoluto. La mayoría de las veces, el framework que estás usando maneja la programación y la ejecución asíncrona. En ese caso, el uso de la API depende del framework, no debes preocuparte por ello. (p. ej., Angular implementó estos cambios).

Error de Chromium: 1334585

Ignorar automáticamente las secuencias de comandos conocidas de terceros

Identifica problemas en tu código más rápido durante la depuración porque las Herramientas para desarrolladores ahora agregan 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 de incremento. Expande el mensaje de error en la consola. 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). Identificar la causa raíz de un error tardó más tiempo.

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

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 agrupadores 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 completa, puedes inhabilitar la configuración en Configuración > Lista de elementos ignorados > 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

Pila de llamadas mejorada 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 muestra solo los marcos 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 muestra solo los fotogramas 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, las Herramientas para desarrolladores mostraban todos los marcos de forma predeterminada.

Pila de llamadas mejorada durante la depuración

Error de Chromium: 1352488

Ocultar las fuentes incluidas en la lista de elementos ignorados en el panel Sources

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.

Ocultar las fuentes incluidas en la lista de elementos ignorados en el panel Sources

Error de Chromium: 1352488

Ocultar los archivos incluidos en la lista de elementos ignorados en el menú Comando

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 el parámetro de configuración ocultar las fuentes incluidas en 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 node_modules que se mostraba como el primer resultado.

Ocultar los archivos incluidos en la lista de elementos ignorados en el menú Comando

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 identificar posibles problemas de capacidad de respuesta.

Por ejemplo, comienza una grabación de 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 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). Utiliza esta información de tiempos para comprender e identificar una oportunidad para mejorar el rendimiento de LCP.

Desglose de 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

Ahora, el panel Grabadora genera un nombre para las grabaciones nuevas de forma automática.

Nombre predeterminado para las grabaciones en el panel Grabadora

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).
En el panel Styles, ahora se muestra un selector de color para la propiedad stop-color del elemento SVG <stop>. (1351096).
Identifica las secuencias de comandos que causan la paginación excesiva de diseños como la posible causa de los cambios de diseño en el panel Estadísticas de rendimiento. (1343019).
Muestra la ruta crítica para las fuentes web LCP en el panel Performance Insights. (1350390).

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 plataforma 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.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar 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.