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

Filtros de red reinventados

El panel Red tiene nuevos filtros, rediseñados en función de tus comentarios. Los filtros específicos para cada tipo permanecen iguales, es decir, un conjunto de insignias en una barra limpia de selección múltiple.

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

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

Para volver al diseño de filtro anterior, borra Configuración > Experimentos > Redesign of the filter bar in the Network panel.

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

Error de Chromium: 362672528

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

Para reducir las probabilidades 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 que se genere el HAR con datos sensibles. El panel Red marcará el botón Exportar con una flecha. Mantén presionado 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 ofrece una serie de mejoras en el panel Elements.

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

El autocompletado en la pestaña Estilos 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 están marcados con una insignia

El panel Elements ahora marca con una nueva insignia "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 insignia refleja el DOM actual y desaparece si el contenido deja de sobrecargarse, por ejemplo, debido a un cambio de tamaño.

Antes y después de marcar el desplazamiento, que se desborda con una insignia.

Error de Chromium: 40670442.

Las declaraciones de Bares después de las reglas anidadas no se desplazan hacia arriba

Después de la decisión del grupo de trabajo de CSS de permitir que las declaraciones sin formato aparezcan después de las reglas anidadas, la pestaña Styles ahora no "mueve hacia arriba" estas declaraciones durante el análisis.

En la siguiente muestra de código, la declaración sin formato después de la regla anidada ahora no hace que Chrome reordene de forma inesperada los estilos 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 listas vengan después de las reglas anidadas.

Error de Chromium: 358119261.

Mejoras en el panel de rendimiento

Esta versión incluye una serie de mejoras en el panel Rendimiento.

Recomendaciones en las métricas en vivo

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

Para obtener recomendaciones, configura la recuperación de datos de campo en el Informe sobre la experiencia del usuario en Chrome (CrUX) y expande la sección Considera tus condiciones de prueba locales en cada tarjeta de métrica (si la hay) y Considera los entornos de usuarios reales en la Configuración del entorno.

Secciones expandidas con recomendaciones

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

Ahora puedes navegar por los breadcrumbs en la línea de tiempo de una grabación de rendimiento: "saltar" de un breadcrumb a otro, reemplazar un breadcrumb secundario y quitar varios. Antes, cuando se seleccionaba una ruta de navegación superior, sus elementos secundarios desaparecen.

Mejoras en el panel de memoria

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

Nuevo perfil “Elementos separados”

El panel Memoria tiene 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 desconectados” al panel Memoria.

Error de Chromium: 350519222.

Se mejoraron los nombres de los objetos de JS sin formato

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

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

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

Problema de Chromium: 350519222.

Cómo desactivar los temas dinámicos

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 los temas dinámicos, borra Configuración > Preferencias > Diseño > Ajustar el esquema de colores de Chrome y vuelve a cargar DevTools.

Antes y después de desactivar los temas dinámicos.

Problema de Chromium: 328472696.

Experimento de Chrome: Uso compartido de procesos

Por lo general, cuando abres varias pestañas del mismo sitio web (como Documentos de Google), Chrome crea un proceso de renderización independiente para cada una. El experimento de uso compartido de procesos cambia esta situación, ya que permite que varias pestañas compartan el mismo proceso del renderizador para mejorar el rendimiento.

Si ves un mensaje que dice "This tab sharing resources with other tabs..." mientras Herramientas para desarrolladores está abierto, significa que formas parte del grupo pequeño con el experimento de uso compartido de procesos 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 la interrupción y el análisis del rendimiento. Para obtener más información, consulta Experimento de Chrome: Uso compartido de procesos.

Lighthouse 12.2.1

El panel de Lighthouse ahora ejecuta Lighthouse 12.2.1.

Esta actualización introduce un umbral de omisión de < 20 KB para las sugerencias de compresión de recursos a fin de ayudarte a enfocarte solo en el ahorro significativo de tamaño de archivo. Consulta la lista completa de cambios.

Para conocer los aspectos básicos del uso del panel Lighthouse en DevTools, consulta Lighthouse: Optimiza la velocidad del sitio web.

Problema de Chromium: 772558.

Otros aspectos destacados

Estas son algunas correcciones y mejoras importantes en esta versión:

  • Elementos:
    • Se realizaron varias correcciones para editar CSS anidado (41486635, 361477264, 328263458, 41487826).
    • Se corrigió el análisis de propiedades personalizadas definidas, pero con valores vacíos, como indefinido (365578428).
  • Consola: Se corrigió un signo & sin escape en cadenas de varias líneas en los comandos cURL (352651673).
  • Memoria: Se corrigió la selección predeterminada en las páginas con trabajadores del servicio, ahora se selecciona el subproceso principal (40669896).
  • Seguridad: El esquema de URL que destaca 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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

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

Usa las siguientes opciones para hablar sobre las nuevas funciones, actualizaciones o cualquier otro aspecto relacionado con Herramientas para desarrolladores.

Novedades de DevTools

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.