Novedades de Herramientas para desarrolladores (Chrome 113)

Sofia Emelianova
Sofia Emelianova

Anular encabezados de respuesta de red

Ahora puedes anular los encabezados de respuesta en el panel Red. Anteriormente, se necesitaba acceso al servidor web para experimentar con los encabezados de respuesta HTTP.

Con las anulaciones de encabezados de respuesta, puedes crear prototipos de correcciones para varios encabezados, incluidos, sin limitaciones, los siguientes:

Para anular un encabezado, navega a Red > Encabezados > Encabezados de respuesta, coloca el cursor sobre el valor de un encabezado, haz clic en Editar. y edítalo.

Se corrigió el error de CORS mediante una anulación de encabezado.

También puedes agregar encabezados personalizados.

Agregar un encabezado personalizado

Para editar todas las anulaciones en un solo lugar, edita el archivo .headers en Fuentes > Anulaciones Allí, también puedes hacer clic en Agregar regla de anulación para anular varias solicitudes con comodines (*).

Editando todas las anulaciones.

Problema de Chromium: 1288023.

Mejoras de depuración de Nuxt, Vite y Rollup

Para ayudarte a identificar problemas más rápido durante la depuración, el seguimiento de pila mejorado ahora oculta los fotogramas que provienen de fuentes generadas por Nuxt 3.3 o versiones posteriores. Herramientas para desarrolladores omite esos fotogramas:

  • En seguimientos de la consola, en el vínculo Mostrar N más marcos.
  • En Fuentes > Pila de llamadas, en Casilla de verificación Mostrar marcos en la lista de elementos ignorados.

El seguimiento de pila antes y después de habilitar la lista de terceros ignorada

Para ofrecerte estas mejoras, los equipos de Herramientas para desarrolladores, Nuxt, Vite y Rollup colaboraron para adoptar la extensión del mapa de origen x_google_ignoreList:

El equipo de Herramientas para desarrolladores desea expresar su agradecimiento a los equipos de Nuxt, Vite y Rollup por hacer esto posible. Agradecemos tu esfuerzo y colaboración, que fueron esenciales para el éxito de esta implementación. Gracias de nuevo por tus contribuciones.

Mejoras de CSS en Elementos > Estilos

Propiedades y valores de CSS no válidos

Para ayudarte a diagnosticar los problemas de CSS más rápido, el panel Styles ahora tacha lo siguiente:

  • Una declaración de CSS completa (valor de propiedad y) cuando la propiedad de CSS no es válida.
  • Solo el valor cuando la propiedad de CSS es válida, pero el valor no lo es.

El nombre de la propiedad y el valor de la propiedad no son válidos.

El equipo de Herramientas para desarrolladores desea expresar su gratitud a Yisi(一丝) por lograr esta mejora.

Vínculos a fotogramas clave en la propiedad de atajo de animación

La propiedad CSS abreviada animation ahora contiene vínculos a las at-rules de @keyframes correspondientes, de modo que puedas navegar por el panel Styles más rápido.

Vínculos a fotogramas clave en la propiedad de atajo de animación.

Problema de Chromium: 1420656.

Nuevo parámetro de configuración de Console: Autocompletar con Intro

A partir de la versión anterior (112), puedes configurar la consola de Herramientas para desarrolladores para aplicar una sugerencia de autocompletar cuando presionas Enter.

De forma predeterminada, puedes presionar Tab o Arrow right para aceptar una sugerencia de autocompletar. Para autocompletar también con Enter, habilita Configuración. Configuración > Consola > Casilla de verificación Aceptar sugerencias de autocompletar con Intro.

La casilla de verificación correspondiente en Configuración.

Además, el texto de otro parámetro de configuración ahora es más fácil de usar: Casilla de verificación Tratar la evaluación de código como acción del usuario.

Problema de Chromium: 1276960.

El menú de comandos destaca los archivos creados

El diálogo de apertura rápida en el menú de comandos ahora está inhabilitado para los archivos de terceros en la lista de elementos ignorados para destacar más los archivos que creaste.

Una secuencia de comandos incluida en la lista de elementos ignorados en el diálogo de apertura rápida antes y después del cambio.

Problema de Chromium: 1424345.

Baja del Generador de perfiles de JavaScript: Etapa dos

A partir de Chrome 58, el equipo de Herramientas para desarrolladores planificó dar de baja el Generador de perfiles de JavaScript y que los desarrolladores de Node.js y Deno usaran el panel Performance para perfilar el rendimiento de la CPU en JavaScript.

La versión 113 de Herramientas para desarrolladores comienza la fase dos de la baja del Generador de perfiles de JavaScript de cuatro fases. Durante esta fase, puedes abrir el panel, pero su IU ya no está disponible.

Para generar un perfil del rendimiento de la CPU, haz clic en Ir al panel de rendimiento.

Baja del Generador de perfiles de JavaScript.

Problema de Chromium: 1354548.

Otros aspectos destacados

Estas son algunas correcciones notables en esta versión:

  • Se corrigió un error que causaba que la impresión con formato del panel Sources controlara de forma incorrecta los nombres de variables con caracteres Unicode (1425055).
  • La pestaña Problemas agregó un mensaje nuevo para los problemas de la función Autocompletar relacionados con los valores HTML no estándar (1399414).

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.