Qué hay de nuevo en DevTools (Chrome 106)

Published on Updated on

Translated to: English, Português, 한국어, 中文, Pусский, 日本語

Gracias por la traducción Carlos Caballero y por la revisión Miguel Ángel.

¿Tienes interés en mejorar DevTools? Regístrate para participar en la Google User Research aquí.

Agrupar archivos por Autoría/Desplegado en el panel Fuentes

Ahora, los archivos agrupados por autor/despliegue se muestran en el menú de 3 puntos. Anteriormente, se mostraban directamente en el panel de navegación.

Abra esta demo. Habilite la opción Agrupar archivos por Autor/Implementación para ver su código fuente original (por autor) primero y navegar más rápido.

Agrupar archivos por Autor/Implementación

Chromium bug: 1352488

Rastreos de pila mejorados

Rastreos de pila vinculados para operaciones asincrónicas

Cuando algunas operaciones están programadas para que sucedan de forma asincrónica, los seguimientos de la pila en DevTools ahora cuentan la "historia completa" de la operación. Anteriormente, solo contaba una parte de la historia.

Por ejemplo, abra esta demo y haga clic en el botón increment. Expanda el mensaje de error en la Consola. En nuestro código fuente, la operación incluye una operación asíncrona de timeout.

// application.component.ts

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

}

Anteriormente, el seguimiento de la pila solo mostraba la operación de timeout. No mostraba la "causa raíz" de la operación.

Con los últimos cambios, DevTools ahora muestra que la operación se origina en el evento onClick en el componente del botón, luego se ejecuta la función increment, seguida de la operación de timeout.

Linked stack traces for asynchronous operations

Detrás de escena, DevTools introdujo una nueva característica "Etiquetado de pila asíncrona". Puede contar la historia completa de la operación vinculando ambas partes del código asíncrono con el nuevo método console.createTask(). Consulte Depuración moderna en DevTools para obtener más información.

¿Suena complicado? Para nada. La mayoría de las veces, el framework que estás utilizando maneja la planificación y la ejecución asíncrona. En ese caso, depende del framework la implementación de la API, no necesita preocuparse por eso. (por ejemplo, Angular implementó estos cambios)

Chromium bug: 1334585

Ignorar automáticamente los scripts de terceros conocidos

Identifique problemas en su código rápidamente durante la depuración, ya que, DevTools ahora agrega automáticamente scripts de terceros conocidos a la lista de ignorados.

Abra esta demo y haga clic en el botón de increment. Expanda el mensaje de error en la Consola. El seguimiento de la pila muestra solo su código (por ejemplo, app.component.ts, button.component.ts). Haga clic en Mostrar más fotogramas para ver el seguimiento completo de la pila.

Ignorar automáticamente los scripts de terceros conocidos en el seguimiento de la pila

Anteriormente, el seguimiento de la pila incluía scripts de terceros como zone.js y core.mjs. Estos no son su código fuente, son generados por paquetes (por ejemplo, webpack) o frameworks (por ejemplo, Angular). Llevó más tiempo identificar la causa raíz de un error.

Automatically ignore known third-party scripts in the stack trace

Detrás de escena, DevTools ignora los scripts de terceros basados en la nueva propiedad x_google_ignoreList en los mapas de origen. Los frameworks y los bundlers deben proporcionar esta información. Consulte Estudio de caso: Mejor depuración angular con DevTools.

Opcionalmente, si prefiere ver siempre los seguimientos de la pila completa, puede desactivar la configuración a través de Configuración > Lista de ignorados > Agregar automáticamente scripts de terceros conocidos a la lista de ignorados.

Configuración para agregar automáticamente scripts de terceros conocidos a la lista de ignorados

Chromium bug: 1323199

Pila de llamadas mejorada durante la depuración

Con la configuración Agregar automáticamente scripts de terceros conocidos para ignorar la lista, la pila de llamadas ahora muestra solo los marcos que son relevantes para su código.

Abra esta demo y establezca un punto de interrupción en la función increment() en app.component.ts. Haga clic en el botón de increment en la página para activar el punto de interrupción. La pila de llamadas muestra solo frameworks de su código (por ejemplo, app.component.ts y button.component.ts).

Para ver todos los fotogramas, habilite Mostrar fotogramas ignorados. Anteriormente, DevTools mostraba todos los fotogramas de forma predeterminada.

Pila de llamadas mejorada durante la depuración

Chromium bug: 1352488

Hiding ignore-listed sources in the Sources panel

Ocultar fuentes ignoradas en el panel Fuentes

Habilite ocultar fuentes ignoradas para ocultar archivos irrelevantes en el panel de Navegación. De esta manera, puede concentrarse solo en su código.

Abra esta demo. En el panel Fuentes. node_modules y webpack son scripts de terceros. Haga clic en el menú de 3 puntos y seleccione ocultar fuentes ignoradas para ocultarlas del panel.

Ocultar fuentes ignoradas en el panel Fuentes

Chromium bug: 1352488

Con la opción ocultar fuentes ignoradas, puede encontrar su archivo más rápido con el Menú de comandos. Anteriormente, buscar archivos en el Menú de comandos retonaba archivos de terceros que podrían no ser relevantes para usted.

Por ejemplo, habilite la configuración ocultar fuentes ignoradas y haga clic en el menú de 3 puntos. Seleccione Abrir archivo. Escriba "ton" para buscar componentes de botón. Anteriormente, los resultados incluían archivos de node_modules, uno de los archivos node_modules incluso se mostraba como el primer resultado.

Ocultar archivos ignorados en el menú de comandos

Chromium bug: 1336604

Nueva pista de interacciones en el panel Rendimiento

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

Por ejemplo, inicie 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 la pista Interacciones. Ambas interacciones tienen los mismos ID, lo que indica que las interacciones se activan a partir de la misma interacción del usuario.

Pista de interacciones en el panel Rendimiento

Chromium bug: 1347390

Desglose de tiempos de LCP en el panel de pespectiva de rendimiento

Desglose de tiempos de LCP en el panel Perspectiva de Rendimiento

Chromium bug: 1351735

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

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

Nombre predeterminado para las grabaciones en el panel Recorder

Chromium bug: 1351383

Destacados varios

  • El panel Estilos ahora muestra un selector de color para la propiedad stop-color del elemento SVG <stop> . (1351096)
  • Identifique el script que está provocando la ejecución de layout como una posible causa fundamental de cambios de diseño con el panel Performance Insights. (1343019)
  • Se muestra la ruta crítica para las fuentes web LCP en el panel Performance Insights. (1350390)

Descarga de los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo por defecto. Estos canales de prueba te dan acceso a las últimas funcionalidades de DevTools, probar innovadoras APIs de la plataforma web y encontrar errores en tus sitios antes que tus usuarios lo hagan.

Ponerse en contacto con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre nuevas funcionalidades y cambios en el artículo o cuaquier cosa relacionada con DevTools.

  • Envía una sugerencia u opinión a través de crbug.com.
  • Reporta un problema con DevTools usando Más opciones   Más   > Ayuda > Reportar un problema con DevTools in DevTools.
  • Haz un Tweet a @ChromeDevTools.
  • Deja un comentario en los vídeos de YouTube sobre Qué hay de nuevo en DevTools.

Más características de DevTools

Por favor, revisa la versión en inglés de What's New In DevTools para una lista completa de las características lanzadas. Debajo tienes más contenido que ha sido traducido al castellano.

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.