Novedades de Herramientas para desarrolladores (Chrome 113)

Cómo anular los encabezados de respuesta de la red

Ahora puedes anular los encabezados de respuesta en el panel Network. Antes, necesitabas acceso al servidor web para experimentar con los encabezados de respuesta HTTP.

Con las anulaciones de encabezados de respuesta, puedes crear prototipos de correcciones de varios encabezados de forma local, 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 con una anulación de encabezado.

También puedes agregar encabezados personalizados.

Se agrega 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 (*).

Estás editando todas las anulaciones.

Error de Chromium: 1288023.

Mejoras en la 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 marcos que provienen de fuentes generadas por Nuxt 3.3 o versiones posteriores. Las Herramientas para desarrolladores omiten esos fotogramas:

  • En los registros de Console, debajo del vínculo Show N more frames
  • En Fuentes > Pila de llamadas, en Casilla de verificación. Mostrar los marcos de la lista de ignorados.

El registro de seguimiento antes y después de habilitar la lista de ignorados de terceros.

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

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

Mejoras en CSS en Elements > Styles

Propiedades y valores de CSS no válidos

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

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

Nombre y valor de propiedad no válidos.

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

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

La propiedad abreviada de CSS animation ahora contiene vínculos a las @reglas @keyframes correspondientes, por lo que puedes navegar por el panel Estilos más rápido.

Vincula a los fotogramas clave en la propiedad abreviada de animación.

Error de Chromium: 1420656.

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

A partir de la versión anterior (112), puedes configurar la consola de Herramientas para desarrolladores para que aplique una sugerencia de autocompletado cuando presiones Enter.

De forma predeterminada, para aceptar una sugerencia de autocompletado, puedes presionar Tab o Arrow right. Para autocompletar también con Enter, habilita Configuración. Configuración > Consola > Casilla de verificación. Aceptar la sugerencia 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.

Error de Chromium: 1276960.

El menú de comandos enfatiza los archivos creados

El diálogo de apertura rápida del Menú de comandos ahora muestra en gris los archivos de terceros incluidos en la lista de ignorados para enfatizar más los archivos que creaste.

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

Error de Chromium: 1424345.

Baja del generador de perfiles de JavaScript: etapa dos

Desde Chrome 58, el equipo de Herramientas para desarrolladores planeó, con el tiempo, desaprobar el Perfilador de JavaScript y hacer que los desarrolladores de Node.js y Deno usen el panel Rendimiento para generar perfiles del rendimiento de la CPU de JavaScript.

La versión 113 de Herramientas para desarrolladores inicia la segunda fase de la baja del Perfilador de JavaScript de cuatro fases. Durante esta fase, aún 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.

Se dejó de usar el generador de perfiles de JavaScript.

Error de Chromium: 1354548.

Otros aspectos destacados

Estas son algunas correcciones destacadas en esta versión:

  • Se corrigió un error que provocaba que la impresión de formato en el panel Fuentes controlara de forma incorrecta los nombres de variables con caracteres Unicode (1425055).
  • En la pestaña Problemas, se agregó un mensaje nuevo para los problemas de Autocompletar relacionados con valores HTML no estándar (1399414).

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.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores