Novedades de DevTools en Chrome 130

Sofia Emelianova

Mejoras en el panel de redes

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 mueven a una lista desplegable. La lista tiene un número que indica cuántos filtros están marcados en el menú desplegable.

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

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 y Authorization de forma predeterminada.

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

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:

• Abreviatura de text-emphasis
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

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.

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;
}

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.

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

Rutas de navegación

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 recibe un nuevo tipo de perfil: Elementos separados. Muestra los objetos que retiene una referencia de JavaScript.

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.

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 settings Configuración > Preferencias > Apariencia > check_box_outline_blank Coincidir con el esquema de color de Chrome y vuelve a cargar Herramientas para desarrolladores.

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.

El uso compartido de procesos puede afectar la depuración de interrupciones 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 del 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.

Problema de Chromium: 772558.

Otros aspectos destacados

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

• Elementos:
  • Se realizaron varias correcciones para editar CSS anidados (41486635, 361477264, 328263458, 41487826).
  • Se corrigió el análisis de propiedades personalizadas definidas pero con valores vacíos como indefinidas (365578428).
• Consola: 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 analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores