Novedades de DevTools en Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Mejoras en el panel de red

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

Filtros de red reinventados

El panel Red recibe filtros nuevos que se reinventan a partir 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 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 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.

Danos tu opinión sobre el diseño rediseñado.

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 Settings > Preferences > Network > Allow to generate HAR with sensitive data. El panel Red marcará el botón Exportar con una flecha. Haz clic prolongado 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 HAR.

Problema de Chromium: 361717594.

Mejoras en el panel de elementos

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

Valores de Autocomplete para propiedades 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.

Desbordamientos de desplazamiento marcados con una insignia

El panel Elements ahora muestra un nuevo "scroll" Insignia los elementos que tienen 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 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 los desbordamientos del desplazamiento con una insignia.

Problema de Chromium: 40670442.

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

Siguiendo la decisión del grupo de trabajo de CSS de permitir que las declaraciones básicas aparezcan después de las reglas anidadas, la pestaña Estilos ahora no se “desplaza hacia arriba”. estas declaraciones durante el análisis.

En la siguiente muestra de código, la declaración desnuda después de la regla anidada ahora no hace que Chrome reordene inesperadamente 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 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 del Informe de UX de Chrome (CrUX) y expande la sección Considera tus condiciones de prueba locales en cada tarjeta de métrica (si corresponde) y Considera los entornos de usuario reales en la Configuración de entorno.

Secciones expandidas con recomendaciones.

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

Ahora puedes navegar por los breadcrumbs en el cronograma 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 una serie de mejoras en el panel Memory.

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:

  • 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 resúmenes de 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 Configuración > Preferencias > Diseño > Ajustar el esquema de colores de Chrome y vuelve a cargar DevTools.

Se desactivan el antes y el después de los temas dinámicos.

Problema de Chromium: 328472696.

Experimento de Chrome: Uso compartido de procesos

Por lo general, cuando abres varias pestañas desde el 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 dice "Esta pestaña comparte recursos con otras pestañas..." mientras Herramientas para desarrolladores está abierto, forma parte de un grupo pequeño que tiene habilitado el experimento Uso compartido de procesos.

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 del archivo. Consulta la lista completa de cambios.

Para aprender los conceptos básicos del uso del panel Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: Cómo optimizar la velocidad del sitio web.

Problema 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 anidados (41486635, 361477264, 328263458, 41487826).
    • Se corrigieron las propiedades personalizadas definidas, pero de valor vacío, que se analizaban como no definidas (365578428).
  • Consola: Se corrigió un signo de unión sin escape en las cadenas de varias líneas en los comandos cURL (352651673).
  • Memory: Se corrigió la selección predeterminada en las páginas con service workers. 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 navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

Novedades de DevTools

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