Novedades de DevTools en Chrome 134

Sofia Emelianova
Sofia Emelianova
GitHub

Panel de privacidad y seguridad

El antiguo panel Seguridad evolucionó al panel Privacidad y seguridad y tiene una nueva sección dedicada a la privacidad. En esta sección, puedes hacer lo siguiente:

  • Mientras las herramientas para desarrolladores están abiertas, limita temporalmente las cookies de terceros con o sin excepciones y prueba el comportamiento de un sitio web.
  • Consulta una tabla con información sobre las cookies de terceros, incluido si el modo de límite temporal las bloqueó o las expidió, y qué tipo de cookies podrían verse afectadas.

Antes y después de agregar la sección Privacidad al panel Seguridad.

Error de Chromium: 352364594.

Mejoras en el panel de rendimiento

Esta versión incluye varias mejoras en el panel Rendimiento.

Ajustes predeterminados calibrados de limitación de la CPU

Ahora puedes calibrar automáticamente y obtener dos parámetros de configuración preestablecidos adicionales de limitación de la CPU que se aproximan con mayor precisión a los dispositivos móviles de gama baja y media.

En el menú desplegable Rendimiento > Limitación de la CPU, selecciona Calibrar… y, luego, en Configuración, haz clic en Calibrar, Continuar y espera a que DevTools calcule las tasas de ralentización de tu dispositivo. Puedes encontrar las opciones de limitación calibrada en el menú desplegable Rendimiento > Limitación de la CPU.

Antes y después de agregar la calibración de limitación

Selecciona diferentes eventos de rendimiento en el mismo chat de IA

El panel de asistencia de IA ahora te permite cambiar el evento seleccionado en el registro de rendimiento en el mismo chat. En otras palabras, no tienes que iniciar un chat nuevo para hablar sobre un evento diferente.

Destacados propios y de terceros en Rendimiento

El panel Rendimiento tiene una nueva tabla en la pestaña Resumen que te permite distinguir entre datos de origen, de terceros y de extensiones.

Coloca el cursor sobre las entradas de la tabla para ver los eventos relevantes destacados en el seguimiento de rendimiento. Marca la opción Dim 3rd parties para enfocarte solo en los datos de origen.

Además, haz clic en el ícono junto a una entrada destacada en la tabla para ir a la pestaña Bottom-up, que se agrupa por terceros.

Datos de campo en las estadísticas y las herramientas de ayuda de los marcadores

Si tienes activados los datos de campo, ahora puedes verlos en las herramientas de ayuda de los marcadores de métricas y en la pestaña Estadísticas.

Antes y después de agregar datos de campo a las herramientas de ayuda de los marcadores y a la pestaña Información.

Error de Chromium: 368135130.

Estadística "Reprocesamiento forzado"

La pestaña Rendimiento > Estadísticas tiene un nuevo elemento en el conjunto de estadísticas: Reflujo forzado. El reacondicionamiento forzado ocurre cuando el motor de renderización pausa la ejecución de la secuencia de comandos para calcular el estilo y el diseño. Los reflujos forzados pueden ser cuellos de botella que te recomendamos evitar.

Cuando colocas el cursor sobre la nueva estadística, se destaca la llamada a función principal con un reflujo forzado, su seguimiento de pila y se muestra el tiempo total de reflujo.

Antes y después de agregar la estadística "Reflujo forzado".

Error de Chromium: 369766156.

Información "Optimiza el tamaño de DOM"

Otra estadística nueva es Optimiza el tamaño de DOM. Un árbol del DOM grande puede ralentizar el rendimiento de tu página.

La estadística destaca los reflujos de diseño largos y los cálculos de estilo que se vieron afectados por un tamaño de DOM grande en el seguimiento de rendimiento y proporciona estadísticas sobre la cantidad total de elementos, la profundidad y la mayoría de los elementos secundarios.

Antes y después de agregar la estadística "Optimiza el tamaño de DOM".

Extiende el registro de rendimiento con console.timeStamp

La API de Extensibility ahora admiteconsole.timeStamp. Además de performance.measure y performance.mark, ahora puedes crear segmentos personalizados en el seguimiento de rendimiento y capturar marcas personalizadas con console.timeStamp, como una alternativa más ligera que no agrega entradas al cronograma de rendimiento interno del navegador, sino que solo las muestra en el seguimiento de rendimiento.

Por ejemplo, puedes usar la siguiente sintaxis:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

Con Configuración de captura > Mostrar segmentos personalizados, verás tu segmento personalizado en el registro:

Antes y después de agregar compatibilidad con console.timeStamp.

Mejoras en el panel de elementos

Esta versión incluye varias mejoras en el panel Elementos.

Valores en tiempo real de los estilos animados

La pestaña Elementos > Estilos ahora actualiza los valores de los estilos animados en tiempo real.

Compatibilidad con la pseudoclase :open y varios pseudoelementos

El panel Elementos ahora admite la pseudoclase :open en la sección Estilos > :hover > Forzar estado de elemento específico para ciertos elementos HTML, como <details>, <select>, <dialog> y <input>.

Antes y después de agregar la opción &quot;:open&quot;.

Además, el panel Elementos ahora también admite varios pseudoelementos nuevos: ::checkmark, ::picker-icon y ::column, ::scroll-button, ::scroll-marker y ::scroll-marker-group relacionados con el carrusel.

Problemas de Chromium: 383157184, 379805728.

Cómo copiar todos los mensajes de la consola

Ahora puedes hacer clic con el botón derecho y copiar todos los mensajes de la consola a la vez.

Antes y después de agregar la opción &quot;Copiar consola&quot;.

Además, puedes encontrar una opción de copia similar en el menú contextual de Red > Carga útil de la solicitud.

Problemas de Chromium: 40206460, 384967020.

Unidades de bytes en el panel Memoria

El panel Memoria ahora muestra los tamaños con las unidades de bytes adecuadas en lugar de grandes cantidades de bytes.

Antes y después de mostrar unidades de bytes.

Error de Chromium: 388589515.

Otros aspectos destacados

Estas son algunas de las correcciones y mejoras más importantes de esta versión:

  • Rendimiento:
    • Anotaciones: Ahora puedes hacer clic en la etiqueta para seleccionar la entrada correspondiente (crbug.com/388224764).
    • Estadísticas: Si haces clic en CLS en la pestaña Estadísticas, ahora se selecciona el peor clúster en lugar del peor cambio.
  • Lista de elementos ignorados: Ahora se ignoran de forma predeterminada los elementos internos del nodo que comienzan con node: (crbug.com/382453615).
  • Expresiones en vivo: Se corrigió un error que causaba que la expresión en vivo afectara el comando $_ (crbug.com/388437265).
  • Elementos > Estilos: Las longitudes relativas ahora tienen un cuadro flotante que muestra el valor absoluto (crbug.com/40778486).
  • Accesibilidad: Los encabezados de las columnas ahora anuncian si se pueden ordenar.
  • Los íconos de las pestañas ahora se encuentran en el lado derecho junto a los nombres de las pestañas, en lugar de la izquierda.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de vista previa 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 de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

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

Novedades de DevTools

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