Novedades de Herramientas para desarrolladores (Chrome 117)

Sofia Emelianova
Sofia Emelianova

Mejoras en el panel de red

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

Se optimizó la función de anulaciones locales para que puedas simular fácilmente encabezados de respuesta y contenido web de recursos remotos desde el panel Red sin acceso a ellos.

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

Las opciones de anulación en el menú desplegable de una solicitud.

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

Selecciona una carpeta y permite el acceso a ella en la barra de acciones de la parte superior.

Una vez configuradas las anulaciones, Herramientas para desarrolladores te llevará a Fuentes > Anulaciones > Editor, que le permite anular el contenido web.

Ten en cuenta que los recursos anulados se indican con Se guardó la configuración. en el panel Red. Coloca el cursor sobre el ícono para ver lo que se anuló.

Un ícono de anulación junto a una solicitud en el panel Red.

Problemas de Chromium: 1465785, 1470532, 1469359.

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

Ahora puedes anular el contenido de XHR y las solicitudes 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 aun si tu backend y la API aún no están listos.

Actualmente, Herramientas para desarrolladores admite anulaciones de contenido para los siguientes tipos de solicitudes: imágenes (por ejemplo, avif, png), fuentes, fetch y XHR, secuencias de comandos (css y js) y documentos (html). Las Herramientas para desarrolladores ahora inhabilitan la opción Anular contenido para los tipos no compatibles.

Problemas de Chromium: 792101, 1469776.

Ocultar solicitudes de extensión de Chrome

El panel Red tiene un nuevo filtro para ayudarte a concentrarte en el código que creas y filtrar las solicitudes irrelevantes enviadas por extensiones que podrías haber instalado en Chrome.

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

Las URL de extensiones están ocultas en la tabla de solicitudes.

Problemas de Chromium: 1257885, 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, de modo que puedas averiguar qué sucedió con la solicitud más rápido.

El antes y el después de mostrar códigos de estado HTTP legibles por humanos.

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 impresión con formato estilístico para subtipos de JSON

La pestaña Respuesta 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 mejorarla.

El antes y el después de analizar un subtipo application/json en una vista previa de respuesta de red.

Problema de Chromium: 406900.

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

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

Antes y después de mostrar cambios en la prioridad de recuperación

Además, puedes encontrar la misma información en la columna Prioridad del panel Red, con la configuración Casilla de verificación Filas de solicitud grandes habilitada.

La columna Prioridad en el panel Red.

Problemas de Chromium: 1463901, 1380964.

Configuración de fuentes habilitada de forma predeterminada: plegado de código y revelación automática de archivos

Configuración. Configuración > Preferencias > Casilla de verificación La opción Plegado del 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 para contraer Contraer.. Haz clic en {...} para volver a expandir el bloque.

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

Esta configuración hace que el árbol de archivos en Fuentes > En Página, selecciona el archivo actual abierto en el Editor cuando cambies de pestaña.

Problemas de Chromium: 1459193, 1336599.

Se mejoró la depuración de los 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 en buen estado y con anuncios de una manera que deje obsoletas las cookies de terceros. Privacy Sandbox tiene un cronograma de eliminación gradual para que puedas adaptarte a los cambios de forma cómoda.

Ya puedes probar el comportamiento de 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 obtener información sobre lo que hace esta marca, consulta Cómo depurar cookies.

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

  • Una advertencia de cambio rotundo sobre la próxima eliminación gradual.
  • Problemas relacionados con las cookies de terceros.

Si deseas ver advertencias de cookies sobre la próxima eliminación gradual 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.

Problemas con las cookies de terceros informados en la pestaña Problemas.

Además, se reformuló el filtro Casilla de verificación Cookies de respuesta bloqueadas del panel Red para que quede claro que solo muestra las cookies de respuesta bloqueadas.

La casilla de verificación está habilitada y muestra solo las solicitudes con cookies de respuesta bloqueadas.

Problemas de Chromium: 1458839, 1462693, 1466310.

Depura la precarga en el panel Application

El equipo de Chrome está restableciendo el procesamiento previo completo de las páginas futuras a las que es probable que navegue un usuario. Para poder depurar esto, Herramientas para desarrolladores agrega la sección Precarga al panel Aplicación. La nueva carga previa y renderización previa (que se conoce 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, en Aplicación > Preloading, puedes inspeccionar lo siguiente:

  • Speculation Rules que muestra una lista de todos los conjuntos de reglas que se encuentran en la página actual.
  • Precargas que enumera todas las URLs precargadas y renderizadas previamente de los conjuntos de reglas.
  • Esta página, que muestra el estado renderizado previamente de la página actual.

Para obtener más información, consulta la publicación exclusiva sobre reglas de especulación para depurar.

Problema de Chromium: 1410709.

Colores nuevos

Es posible que ya hayas notado que Herramientas para desarrolladores ahora tiene una apariencia actualizada que se alinea mejor con Chrome. Un factor contribuyente es el nuevo esquema de colores.

El antes y el después de aplicar colores nuevos.

Esta versión (117) aporta más mejoras de UX a Herramientas para desarrolladores, las cuales ya se mencionaron y se enumeran más adelante, incluidos varios textos de IU mejorados.

Problema de Chromium: 1456677.

Lighthouse 10.4.0

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

Por ejemplo:

Se produjo un error en la comprobación del color de los vínculos que hace que no se puedan distinguir.

Consulta también la lista completa de cambios. Para aprender los conceptos básicos del uso del panel de Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: Cómo optimizar la velocidad del sitio web.

Problema de Chromium: 772558.

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

La extensión de depuración 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 capacidades de depuración en Herramientas para desarrolladores para programas de C++ compilados en WebAssembly. Para obtener más información, consulta Cómo depurar C/C++ WebAssembly.

Obtén información para compilar, ejecutar y probar la extensión, y puedes contribuir.

Problema de Chromium: 1410709.

Otros aspectos destacados

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

Nuevas funciones experimentales

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

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

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

Problema de Chromium: 1424879.

Supervisor de protocolos mejorados

Las Herramientas para desarrolladores de Chrome usan el protocolo de Herramientas para desarrolladores de Chrome (CDP) para instrumentar, inspeccionar, depurar y generar perfiles de los navegadores Chrome. Si eres desarrollador de Chromium o Herramientas para desarrolladores, el monitor de Protocolo te proporciona una manera de ver todas las solicitudes y respuestas de CDP realizadas por Herramientas para desarrolladores y enviar comandos de CDP.

El monitor de protocolo obtiene una interfaz nueva para que puedas crear y enviar comandos de CDP con mayor facilidad. Ya no tienes que buscar comandos y sus parámetros en la documentación, las Herramientas para desarrolladores te los sugerirán.

En la esquina inferior derecha de la pestaña del panel lateral Supervisión de protocolos, haz clic en El panel izquierdo está abierto. Mostrar el editor de comandos de CDP, selecciona un destino, comienza a escribir un comando, selecciona uno de los sugeridos, si es necesario, especifica los valores de los parámetros y haz clic en Enviar. Enviar comando (Ctrl/Cmd + Intro).

Especificar y enviar un comando de CDP.

Problema de Chromium: 1469345.

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.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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.

  • Para enviarnos sugerencias o comentarios, accede a crbug.com.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Twittea a @ChromeDevTools.
  • Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

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