Novedades de DevTools en Chrome 134

Sofia Emelianova
Sofia Emelianova
GitHub

Panel de privacidad y seguridad

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

  • Mientras Herramientas para desarrolladores está abierto, 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 excluyó, y qué tipo de cookies pueden 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 de limitación de la CPU calibrados

Ahora puedes calibrar automáticamente y obtener dos ajustes predeterminados adicionales de limitación de la CPU que se aproximan con mayor precisión a los dispositivos móviles de nivel medio y bajo.

En el menú desplegable Rendimiento > Aceleració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 volver a encontrar las opciones de regulación calibradas en el menú desplegable Rendimiento > Regulación de CPU.

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

Seleccionar 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.

Destacado de origen y de terceros en Rendimiento

El panel Rendimiento incluye una nueva tabla en la pestaña Resumen que te permite distinguir entre los 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 registro de rendimiento. Marca la opción Atenuar terceros 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 De abajo hacia arriba agrupada por terceros.

Datos de campo en las sugerencias y estadísticas de la herramienta de marcadores

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

Antes y después de agregar datos archivados a las Tooltips de marcadores y a la pestaña Estadísticas.

Error de Chromium: 368135130.

Estadística de "Reprocesamiento forzado"

La pestaña Rendimiento > Estadísticas recibe una nueva incorporación al conjunto de estadísticas: Reflujo forzado. El reflujo forzado se produce cuando el motor de renderización pausa la ejecución de la secuencia de comandos para calcular el diseño y el estilo. Los reflujos forzados pueden ser cuellos de botella que te convendría evitar.

Cuando colocas el cursor sobre la nueva estadística, se destaca la llamada a la 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 sugerencia "Reflujo forzado".

Problema de Chromium: 369766156.

Sugerencia "Optimiza el tamaño del DOM"

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

La estadística destaca los reprocesamientos de diseño y los nuevos cálculos de estilo prolongados que se vieron afectados por un tamaño de DOM grande en el registro 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 sugerencia "Optimiza el tamaño del 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 pistas personalizadas en el registro de rendimiento y capturar marcas personalizadas con console.timeStamp, como una alternativa más ligera que no agrega entradas a la línea de tiempo de rendimiento interna del navegador, sino que solo las muestra en el registro 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 Capture settings > Show custom tracks, verás tu segmento personalizado en el registro:

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

Mejoras en el panel de elementos

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

Valores en tiempo real de los estilos animados

La pestaña Elements > Styles ahora actualiza los valores de los diseños animados en tiempo real.

Compatibilidad con la seudoclase :open y varios seudoelementos

El panel Elements ahora admite la pseudoclase :open en la sección Styles > :hov > Force specific element state 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 Elements ahora también admite varios seudoelementos nuevos: ::checkmark, ::picker-icon y relacionados con el carrusel ::column, ::scroll-button, ::scroll-marker y ::scroll-marker-group.

Problemas de Chromium: 383157184 y 379805728.

Cómo copiar todos los mensajes de la consola

Ahora puedes copiar todos los mensajes de la consola a la vez con un clic derecho.

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 Network > Request Payload.

Problemas de Chromium: 40206460, 384967020.

Unidades de bytes en el panel de Memory

El panel Memoria ahora muestra tamaños con 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: Cuando haces clic en CLS en la pestaña Estadísticas, ahora se selecciona el peor clúster en lugar del peor cambio.
  • Lista de ignorados: Ahora, los elementos internos del nodo que comienzan con node: se ignoran de forma predeterminada (crbug.com/382453615).
  • Expresiones en vivo: Se corrigió un error que provocaba que la expresión en vivo afectara el comando $_ (crbug.com/388437265).
  • Elements > Styles: Las longitudes relativas ahora tienen una ventana emergente que muestra el valor absoluto (crbug.com/40778486).
  • Accesibilidad: Ahora, los encabezados de columna anuncian si se pueden ordenar.
  • Los íconos de las pestañas ahora se encuentran a la derecha, junto a los nombres de las pestañas, en lugar de a la izquierda.

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 vanguardia de la plataforma web 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 Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

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