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

La función de anulaciones locales ahora está optimizada, por lo que puedes simular fácilmente los encabezados de respuesta y el contenido web de los recursos remotos desde el panel Red sin tener 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 habilita. Si aún no lo hiciste, 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.

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

Una vez que se configuren las anulaciones, DevTools te llevará a Sources > Overrides > Editor para que puedas 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 de red.

Problemas de Chromium: 1465785, 1470532, 1469359.

Anula 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, DevTools admite anulaciones de contenido para los siguientes tipos de solicitudes: imágenes (por ejemplo, avif y png), fuentes, recuperación y XHR, secuencias de comandos (CSS y JS) y documentos (HTML). DevTools ahora inhabilita la opción Override content para los tipos no admitidos.

Problemas de Chromium: 792101, 1469776.

Ocultar solicitudes de extensión de Chrome

Para ayudarte a enfocarte en el código que escribes y filtrar las solicitudes irrelevantes que envían las extensiones que podrías haber instalado en Chrome, el panel Red tiene un nuevo filtro.

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

Las URLs de extensión se ocultan de 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 por humanos junto a los códigos de estado HTTP, de modo que puedas descubrir 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.

Error 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 mejorar su apariencia.

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

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 la pista 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 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 Priority del panel Network, con el parámetro de configuración Big request rows de Casilla de verificación. habilitado.

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

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

Para contraer 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 contraer Contraer.. Haz clic en {...} para volver a expandir el bloque.

Además, la opción 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.

Este parámetro de configuración hace que el árbol de archivos en Sources > Page seleccione el archivo actual abierto en el Editor cuando cambias de pestaña.

Problemas de Chromium: 1459193, 1336599.

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

Con el objetivo de 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, en esencia, la privacidad en la Web y puede mantener una Web saludable y con anuncios de una manera que dejará 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 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 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 marca), la pestaña Problemas ahora tiene la casilla de verificación 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:

  • Una advertencia sobre el cambio rotundo de la próxima baja 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 de cookies de terceros informados en la pestaña Problemas

Además, se reformuló el filtro Cookies de respuesta bloqueadas de Casilla de verificación en el panel Red para dejar en 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 restablecerá la renderización previa completa de las páginas futuras a las que es probable que navegue un usuario. Para que puedas depurar esto, DevTools agrega la sección Precarga al panel Application. La nueva carga previa y renderización previa (conocidas colectivamente como "carga previa de navegación") usan la API de Speculation Rules en lugar de las sugerencias de recursos basadas en vínculos.

En esta página de demostración, en la sección Application > Preloading, puedes inspeccionar lo siguiente:

  • Reglas de especulación, que muestra una lista de todos los conjuntos de reglas que se encuentran en la página actual.
  • Precargas que enumeran todas las URLs recuperadas y renderizadas previamente de los conjuntos de reglas.
  • Esta página, que muestra el estado de renderización previa de la página actual.

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

Error de Chromium: 1410709.

Colores nuevos

Es posible que ya hayas notado que DevTools ahora tiene un aspecto renovado que se alinea mejor con Chrome. Un factor que contribuye es el nuevo esquema de colores.

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

Esta versión (117) trae más mejoras de UX a DevTools, tanto las que ya se mencionaron como las que se enumeran a continuación, incluidos algunos textos de IU mejorados.

Error 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:

No se pudo verificar el color de los vínculos, lo que los hace indiscernibles.

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

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

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

Obtén 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 correcciones y mejoras notables en esta versión:

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 experimental de medios de CSS prefers-reduced-transparency en sus dispositivos para indicar su preferencia de reducir los efectos transparentes. Te recomendamos que tengas en cuenta esta preferencia para aumentar la accesibilidad de tu sitio web. Para ayudarte, la pestaña del panel Rendering ahora puede emular la configuración de 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 Funciones experimentales de la plataforma web en chrome://flags.

Error de Chromium: 1424879.

Supervisor de protocolos mejorados

Chrome DevTools usa el Protocolo de herramientas para desarrolladores de Chrome (CDP) para instrumentar, inspeccionar, depurar y generar perfiles de navegadores Chrome. Si eres desarrollador de Chromium o DevTools, el Monitor de protocolo te brinda una forma de ver todas las solicitudes y respuestas de CDP que realiza DevTools y enviar comandos de CDP.

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

En la esquina inferior derecha de la pestaña del panel lateral Protocol monitor, haz clic en Panel izquierdo abierto. Show CDP command editor, 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. Send command (Ctrl/Cmd + Enter).

Especificar y enviar un comando de CDP.

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 vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, te permiten probar API de plataformas web de vanguardia y te ayudan a encontrar 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, actualizaciones o cualquier otro aspecto relacionado con Herramientas para desarrolladores.

Novedades de DevTools

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