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.

Rediseñados los filtros de red

El panel Red tiene nuevos filtros, rediseñados en función de tus comentarios. Los filtros específicos del tipo siguen siendo los mismos: un conjunto de insignias en una barra de selección múltiple clara.

Para ordenar la IU, las casillas de verificación relacionadas con la ocultación, el bloqueo y terceros se mueven a 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 de ocultación, bloqueo y de terceros a 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 posibilidades de filtraciones accidentales de información sensible, el registro de red exportado en formato HAR ya no contendrá los encabezados Cookie, Set-Cookie ni Authorization de forma predeterminada.

Para exportar registros en formato HAR con los datos sensibles, activa Settings > Preferences > Network > Allow to generate HAR with sensitive data. 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 incluye varias mejoras en el panel Elementos.

Valores de autocompletar para propiedades text-emphasis-*

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

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

Error de Chromium: 361471205.

Desbordamientos de desplazamiento marcados con una insignia

El panel Elementos ahora marca con una nueva insignia de "desplazamiento" los elementos que contienen contenido desbordado y tienen overflow: scroll o overflow: auto, de modo 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 el desbordamiento del desplazamiento con una insignia.

Error de Chromium: 40670442.

Las declaraciones sin formato 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 sin formato aparezcan después de las reglas anidadas.

Error 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 cerca posible de lo que experimentan 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. Anteriormente, cuando seleccionabas un elemento de ruta de acceso 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 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 separados" 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 las instantáneas del montón, los objetos de JavaScript simples ahora son los siguientes:

  • Se 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 objetos en las instantáneas del montón.

Error 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 Settings > Preferences > Appearance > Match Chrome color scheme y vuelve a cargar DevTools.

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

Error 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 Uso compartido de procesos cambia esto, ya que permite que varias pestañas compartan el mismo proceso de renderización para mejorar el rendimiento.

Si ves un mensaje que indica que "Esta pestaña comparte recursos con otras pestañas…" en la barra de información mientras Herramientas para desarrolladores está abierta, significa que formas parte del pequeño grupo con el experimento de Compartir 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 puntos de interrupción y el análisis de 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 presenta un umbral de omisión < 20 KB para las sugerencias de compresión de recursos que te ayudará a enfocarte solo en las reducciones significativas del 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.

Error de Chromium: 772558.

Otros aspectos destacados

Estas son algunas de las correcciones y mejoras más importantes de 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: Ahora, el resaltado del esquema de URL 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 Chrome DevTools

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.