Novedades de DevTools en Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Mejoras en el panel de red

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

Se rediseñaron los filtros de red

El panel Network incluye filtros nuevos, rediseñados en función de tus comentarios. Los filtros específicos del tipo permanecen iguales: un conjunto de insignias en una barra de selección múltiple clara.

Para ordenar la IU, las casillas de verificación relacionadas con ocultar, bloquear y terceros se trasladan a una lista desplegable. La lista tiene un número que indica cuántos filtros están marcados en el menú desplegable.

Antes y después de mover los filtros relacionados con ocultar, bloquear y terceros a un menú desplegable.

Para volver al diseño anterior del filtro, borra Configuración > Experimentos > Rediseño de la barra de filtros en el panel de red.

Cuéntanos qué te parece el nuevo diseño.

Error de Chromium: 362672528.

Las exportaciones de HAR ahora excluyen los datos sensibles de forma predeterminada

Para reducir las posibilidades de filtraciones accidentales de información sensible, el registro de red exportado en formato HAR ya no contendrá los encabezados Cookie, Set-Cookie y Authorization de forma predeterminada.

Para exportar registros en formato HAR con los datos sensibles, activa Configuración > Preferencias > Red > Permitir la generación de HAR con datos sensibles. El panel Network marcará el botón Export de con una flecha. Haz clic de forma prolongada en el botón y selecciona Exportar HAR (con datos sensibles) en el menú desplegable.

Antes y después de agregar opciones de exportación con y sin datos sensibles a la exportación de HAR.

Error de Chromium: 361717594.

Mejoras en el panel de elementos

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

Valores de autocompletado para las propiedades de text-emphasis-*

La función de autocompletar de la pestaña Styles ahora sugiere valores para las siguientes propiedades de CSS:

Antes y después de agregar la opción de autocompletado para las propiedades "text-emphasis-*".

Problema de Chromium: 361471205.

Los desbordamientos de desplazamiento se marcan con un distintivo

El panel Elements ahora marca con una nueva insignia de "scroll" los elementos que contienen contenido desbordado y tienen overflow: scroll o overflow: auto, para que puedas detectar fácilmente los desbordamientos de desplazamiento. Al igual que las otras insignias, esta refleja el DOM actual y desaparece si el contenido deja de desbordarse debido, por ejemplo, a un cambio de tamaño.

Antes y después de marcar los desbordamientos de desplazamiento con una insignia.

Error de Chromium: 40670442.

Las declaraciones simples después de reglas anidadas no se "desplazan hacia arriba"

Tras la decisión del Grupo de trabajo de CSS de permitir que las declaraciones simples aparezcan después de las reglas anidadas, la pestaña Styles ya no "sube" estas declaraciones durante el análisis.

En la siguiente muestra de código, la declaración simple después de la regla anidada ya no hace que Chrome reordene los estilos de forma inesperada en la cascada:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

Antes y después de permitir que las declaraciones simples aparezcan después de las reglas anidadas.

Problema de Chromium: 358119261.

Mejoras en el panel de rendimiento

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

Recomendaciones en las métricas en vivo

Las métricas en vivo ahora pueden proporcionar recomendaciones específicas de métricas que te ayudan a configurar tu entorno de desarrollo lo más parecido posible a lo que experimentan tus usuarios.

Para obtener recomendaciones, configura la recuperación de datos de campo del Chrome UX Report (CrUX) y expande la sección Considera las condiciones de tu prueba local en cada tarjeta de métrica (si hay alguna) y Considera los entornos de usuarios reales en la Configuración del entorno.

Se expandieron las secciones con recomendaciones.

Sigue las recomendaciones para aproximarte a la experiencia de tus usuarios.

Ahora puedes navegar por las rutas de navegación en la línea de tiempo de una grabación de rendimiento: "saltar" hacia adelante y hacia atrás entre las rutas de navegación, anular una ruta de navegación secundaria y quitar varias rutas secundarias. Anteriormente, cuando seleccionabas un segmento superior, desaparecían sus elementos secundarios.

Mejoras en el panel de memoria

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

Nuevo perfil "Elementos desconectados"

El panel Memoria obtiene un nuevo tipo de perfil: Elementos separados. Muestra los objetos que retiene una referencia de JavaScript.

Antes y después de agregar el tipo de perfil "Elementos separados" al panel Memoria.

Error de Chromium: 350519222.

Se mejoró la nomenclatura de los objetos JS simples

Para organizar y ordenar la categoría Object en las instantáneas del montón, ahora los objetos JavaScript simples son los siguientes:

  • Se nombran según las propiedades que contienen, por ejemplo, {firstProperty, secondProperty, ..., *nthProperty}.
  • Se pueden buscar por estos nombres que construye DevTools.
  • Se agrupan si tienen las mismas propiedades.

Antes y después de organizar la categoría Object en las instantáneas de montón.

Error de Chromium: 350519222.

Cómo desactivar el tema dinámico

Ahora puedes desactivar la coincidencia automática de los colores de las Herramientas para desarrolladores con los colores de tu tema personalizado en Chrome.

Para desactivar la aplicación de temas dinámicos, desmarca Configuración > Preferencias > Apariencia > Coincidir con el esquema de color de Chrome y vuelve a cargar Herramientas para desarrolladores.

Antes y después de desactivar el tema dinámico.

Problema de Chromium: 328472696.

Chrome Experiment: Process sharing

Normalmente, cuando abres varias pestañas del mismo sitio web (como Documentos de Google), Chrome crea un proceso de renderizador independiente para cada una. El experimento Process sharing cambia esto, ya que permite que varias pestañas compartan el mismo proceso de renderizador para mejorar el rendimiento.

Si ves la barra de información "Esta pestaña comparte recursos con otras pestañas…" mientras las Herramientas para desarrolladores están abiertas, significa que formas parte del grupo pequeño con el experimento Process sharing habilitado.

La barra de información "Esta pestaña comparte recursos con otras pestañas…".

El uso compartido de procesos puede afectar la depuración de puntos de interrupción y el análisis del rendimiento. Para obtener más información, consulta Chrome Experiment: Process sharing (Experimento de Chrome: Uso compartido de procesos).

Lighthouse 12.2.1

El panel Lighthouse ahora ejecuta Lighthouse 12.2.1.

Esta actualización introduce un umbral de ignorar < 20 KB para las sugerencias de compresión de recursos, lo que te ayudará a enfocarte solo en las reducciones significativas del tamaño de archivo. Consulta la lista completa de cambios.

Para conocer los conceptos básicos del uso del panel Lighthouse en las Herramientas para desarrolladores, consulta Lighthouse: Optimiza la velocidad del sitio web.

Error de Chromium: 772558.

Otros aspectos destacados

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

  • Elementos:
    • Se corrigieron varios errores relacionados con la edición de CSS anidados (41486635, 361477264, 328263458, 41487826).
    • Se corrigió el análisis de propiedades personalizadas definidas pero con valores vacíos como indefinidas (365578428).
  • Console: Se corrigió un signo et no escapado en cadenas de varias líneas en comandos cURL (352651673).
  • Memoria: Se corrigió la selección predeterminada en las páginas con trabajadores de servicio. Ahora se selecciona el subproceso principal (40669896).
  • Seguridad: El resaltado del esquema de URL ahora se actualiza correctamente a medida que cambia la etapa de seguridad de un origen (359920086).

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