Novedades de Herramientas para desarrolladores (Chrome 117)

Mejoras en el panel de redes

Anula el contenido web de forma local aún más rápido

La función invalidaciones locales ahora es más eficiente, por lo que puedes simular fácilmente los encabezados de respuesta y el contenido web de los recursos remotos desde el panel Network sin tener acceso a ellos.

Para anular el contenido web, abre el panel Network, haz clic con el botón derecho en una solicitud y selecciona Anular contenido.

Si tienes anulaciones locales configuradas, pero inhabilitadas, las Herramientas para desarrolladores las habilitarán. Si aún no los configuraste, DevTools te lo indicará en la barra de acciones de la parte superior. Selecciona una carpeta para almacenar las anulaciones y permite que DevTools acceda a ella.

Una vez que se configuran las anulaciones, DevTools te lleva a Sources > Overrides > Editor para que anules el contenido web.

Ten en cuenta que los recursos anulados se indican con en el panel Network. Coloca el cursor sobre el ícono para ver qué se anuló.

Problemas de Chromium: 1465785, 1470532, 1469359.

Anula el contenido de las solicitudes de XHR y de recuperación

Ahora puedes anular el contenido de las solicitudes de XHR y de recuperación, además de sus encabezados de respuesta. Con estas anulaciones, puedes simular las respuestas de la API para depurar tu página web, incluso si tu backend y tu API aún no están listos.

Actualmente, DevTools admite la anulación de contenido para los siguientes tipos de solicitudes: imágenes (por ejemplo, avif, png), fuentes, recuperación y XHR, secuencias de comandos (CSS y JS) y documentos (HTML). Las Herramientas para desarrolladores ahora inhabilitan la opción Invalidar contenido para los tipos no compatibles.

Problemas de Chromium: 792101 y 1469776.

Oculta las solicitudes de extensiones de Chrome

Para ayudarte a concentrarte en el código que escribes y filtrar las solicitudes irrelevantes que envían las extensiones que instalaste en Chrome, el panel Network recibe un nuevo filtro.

Para filtrar todas las solicitudes enviadas a URLs de chrome-extension://, marca Ocultar las URLs de extensión.

Problemas de Chromium: 1257885 y 1458803.

Códigos de estado HTTP legibles por humanos

El código de estado en el encabezado de la solicitud ahora muestra texto legible junto a los códigos de estado HTTP, por lo que puedes averiguar qué sucedió con la solicitud más rápido.

También puedes colocar el cursor sobre el código de estado en la tabla de solicitudes para ver el mismo texto.

Problema de Chromium: 1153956.

Respuestas con formato legible para subtipos de JSON

La pestaña Response de una solicitud con un subtipo de MIME application/[subtype]+json (por ejemplo, ld+json, hal+json y otros) ahora analiza la respuesta correctamente y te permite embellecerla.

Error de Chromium: 406900.

Rendimiento: Consulta los cambios en la prioridad de recuperación para los eventos de red

El panel Rendimiento ahora muestra dos campos de prioridad en el Resumen de un evento en el registro de Red: Prioridad inicial y Prioridad (final), en lugar de solo la Prioridad única. Con este campo adicional, ahora puedes ver si cambia la prioridad de recuperación del evento y ajustar el orden de las descargas. Para obtener más información, consulta Cómo optimizar la carga de recursos con la API de Fetch Priority.

Además, puedes encontrar la misma información en la columna Prioridad del panel Red con el parámetro de configuración Filas de solicitudes grandes habilitado.

Problemas de Chromium: 1463901 y 1380964.

Parámetros de configuración de Sources habilitados de forma predeterminada: Plegado de código y revelación automática de archivos

La opción Configuración > Preferencias > Plegado de código ahora está habilitada de forma predeterminada. Esta opción te permite plegar bloques de código.

Para plegar un bloque de código, coloca el cursor sobre el número de línea junto al inicio del bloque y haz clic en el ícono de plegar . Haz clic en {...} para volver a expandir el bloque.

Además, la opción Configuración > Preferencias > Revelar automáticamente los archivos en la barra lateral ahora también está habilitada de forma predeterminada.

Este parámetro de configuración hace que el árbol de archivos en Fuentes > Página seleccione el archivo actual abierto en el Editor cuando cambias de pestañas.

Problemas de Chromium: 1459193, 1336599.

Se mejoró la depuración de problemas relacionados con las cookies de terceros

En un esfuerzo por ayudar a crear una Web más privada y en paralelo con las actualizaciones de otros navegadores, Chrome presentó la iniciativa Privacy Sandbox. Esta iniciativa mejora fundamentalmente la privacidad en la Web y puede mantener una Web saludable y con anuncios de una manera que hará que las cookies de terceros queden obsoletas. Privacy Sandbox tiene un cronograma de baja gradual para que te adaptes a los cambios con comodidad.

Ya puedes probar cómo se comporta Chrome después de la eliminación gradual de las cookies de terceros. Para ello, ejecuta Chrome desde la línea de comandos con la marca --test-third-party-cookies-phaseout. Para saber qué hace esta marca, consulta Cómo depurar cookies.

Independientemente de la forma en que ejecutes Chrome (con o sin la marca), la pestaña Problemas ahora tiene la casilla de verificación Incluir problemas de cookies de terceros habilitada de forma predeterminada para todos los usuarios nuevos de Chrome y, como resultado, informa lo siguiente:

• Advertencia de cambio rotundo sobre la próxima baja.
• Problemas relacionados con las cookies de terceros

Si quieres ver advertencias sobre las cookies en relación con la próxima baja en desuso como usuario existente de Chrome, asegúrate de marcar esta casilla de verificación.

Para probar esto, inspecciona las cookies en esta página de demostración.

Además, se modificó la redacción del filtro Cookies de respuesta bloqueadas en el panel Red para aclarar que solo muestra las cookies de respuesta bloqueadas.

Problemas de Chromium: 1458839, 1462693, 1466310.

Depura la precarga en el panel Application

El equipo de Chrome volverá a implementar la función de procesamiento previo completo de las páginas futuras a las que es probable que navegue un usuario. Para ayudarte a depurar esto, Herramientas para desarrolladores agrega la sección Precarga al panel Aplicación. La nueva función de recuperación previa y renderización previa (conocidas en conjunto como "precarga de navegación") usa la API de Speculation Rules en lugar de las sugerencias de recursos basadas en vínculos.

En esta página de demostración de la renderización previa, en la sección Aplicación > Carga previa, puedes inspeccionar lo siguiente:

• Reglas de especulación, que enumera todos los conjuntos de reglas que se encuentran en la página actual
• Precargas, que enumera todas las URLs que se obtuvieron previamente y se renderizaron previamente de los conjuntos de reglas
• Esta página, que muestra el estado de la página actual después de la renderización previa

Para obtener más información, consulta la publicación dedicada a la depuración de reglas de especulación.

Error de Chromium: 1410709.

Colores nuevos

Es posible que ya hayas notado que Herramientas para desarrolladores ahora tiene un aspecto renovado que se alinea mejor con Chrome. Uno de los factores que contribuyen a esto es el nuevo esquema de colores.

Esta versión (117) incluye más mejoras en la UX de DevTools, tanto las que ya se mencionaron como las que se enumeran más adelante, incluido varios textos de la IU mejorados.

Error de Chromium: 1456677.

Lighthouse 10.4.0

El panel Lighthouse ahora ejecuta Lighthouse 10.4.0. En particular, esta versión agrega nuevas auditorías de accesibilidad para lo siguiente:

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

Por ejemplo:

Consulta también 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.

La extensión de depuración de C/C++ WebAssembly para Herramientas para desarrolladores ahora es de código abierto

La extensión de depuración de C/C++ WebAssembly para Herramientas para desarrolladores ahora es de código abierto y reside en el repositorio de frontend de Herramientas para desarrolladores. Esta extensión habilita las capacidades de depuración en las Herramientas para desarrolladores para los programas en C++ compilados en WebAssembly. Para obtener más información, consulta Cómo depurar WebAssembly en C/C++.

Obtén más información para compilar, ejecutar y probar la extensión, y no dudes en contribuir.

Error de Chromium: 1410709.

Otros aspectos destacados

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

• Anidamiento de CSS: El panel Elements ahora muestra toda la cadena de selectores para los elementos secundarios anidados (1172985).
• Application > Manifest ahora tiene una sección Window Controls Overlay que verifica si hay un valor display_override en el manifiesto y proporciona vínculos a la documentación pertinente.
• El árbol Fuentes > Página ahora hace lo siguiente, entre otras cosas (1442863):
  • Las carpetas se muestran en gris si todo su contenido está en la lista de elementos ignorados.
  • Las carpetas se muestran en color naranja si todo su contenido proviene de un mapa de origen.
• Rendimiento: La opción Configuración de captura ahora se oculta automáticamente cuando inicias la grabación (1455498).
• Fuentes > Editor restableció el comportamiento de Ctrl + Flecha (Win) y Opción + Flecha (macOS) (1468208).
• El botón de activación Animaciones > Pausar todo ahora mantiene su estado en las cargas de página (1446046).
• Aplicación > Almacenamiento > Almacenamiento en caché se trasladó a Aplicación > Almacenamiento > Sección de caché (1462622).
• Se mejoraron algunos textos de la IU y sugerencias: Sugerencia de simultaneidad de hardware, Textos del filtro de red y una opción del menú principal, uso de mayúsculas en el árbol de la aplicación, Textos de Red > Encabezados, Textos de Fuentes > Anulaciones y sistema de archivos.

Nuevas funciones experimentales

Nueva emulación de renderización: prefers-reduced-transparency

Es posible que los usuarios de tu sitio web comiencen a habilitar la nueva función de medios prefers-reduced-transparency de CSS experimental en sus dispositivos para indicar su preferencia por reducir los efectos transparentes. Puedes tener en cuenta esta preferencia para aumentar la accesibilidad de tu sitio web. Para ayudarte, la pestaña del panel Renderización ahora puede emular el parámetro de configuración prefers-reduced-transparency: reduce, de modo que puedas crear un prototipo de solución y probar cómo se comporta tu sitio web en este caso.

Para probar esta función en Chrome, habilita Funciones experimentales de la plataforma web en chrome://flags.

Error de Chromium: 1424879.

Monitor de protocolo mejorado

Las Herramientas para desarrolladores de Chrome usan el Chrome DevTools Protocol (CDP) para instrumentar, inspeccionar, depurar y generar perfiles de los navegadores Chrome. Si eres desarrollador de Chromium o de DevTools, el Monitor de protocolo te permite ver todas las solicitudes y respuestas del CDP que realizan las Herramientas para desarrolladores, y enviar comandos del CDP.

El Monitor de protocolo tiene una nueva interfaz que te permite crear y enviar comandos de CDP con mayor facilidad. Ahora no tienes que buscar comandos y sus parámetros en la documentación, ya que Herramientas para desarrolladores te los sugerirá.

En la esquina inferior derecha de la pestaña del panel Protocol monitor, haz clic en Show CDP command editor, selecciona un destino, comienza a escribir un comando, selecciona uno de los sugeridos, especifica los valores de los parámetros si es necesario y haz clic en Send command (Ctrl/Cmd + Intro).

Error de Chromium: 1469345.

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