Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores, Chrome 125

Sofia Emelianova

Comprende mejor los errores y las advertencias en Console con Gemini

Esta versión de Chrome incluye funciones de IA generativa en la consola de Herramientas para desarrolladores, con el objetivo de ayudarte a comprender mejor los errores y las advertencias que encuentras.

Para obtener una explicación generada por IA de un error o una advertencia, haz clic en el botón Comprender este error (advertencia) junto al mensaje en Console y sigue las instrucciones.

La explicación de un error generada por IA.

Para obtener más información, consulta Comprende mejor los errores y las advertencias con IA.

Compatibilidad con reglas `@position-try` en Elementos > Estilos

Para ayudarte a depurar el posicionamiento de anclajes de CSS, la pestaña Elementos > Estilos ahora admite @position-try reglas de CSS. La pestaña resuelve los valores de position-try-options y vincula cada opción a una sección @position-try --name dedicada.

El antes y el después de admitir las reglas de CSS @position-try.

Para obtener más información, consulta Cómo conectar los elementos entre sí con el posicionamiento de anclaje de CSS.

Problema de Chromium: 40279608.

Mejoras en el panel de fuentes

Esta versión ofrece varias mejoras en el panel Fuentes.

Configura la impresión con diseños automáticos y el cierre de corchetes

Ahora puedes activar o desactivar la impresión con recorte automática y el cierre de corchetes para el Editor en Fuentes. La impresión con formato estilístico hace que los archivos reducidos sean legibles. El cierre de paréntesis agrega automáticamente un corchete de cierre () o }) o una etiqueta (>) cuando escribes un corchete de apertura.

Para configurar el comportamiento relevante, marca o borra las nuevas opciones de check_box Dos corchetes de cierre automático y check_box Imprimir fuentes reducidas automáticamente con un formato agradable en Configuración Configuración > Preferencias > Fuentes.

Problemas de Chromium: 40865010 y 324314570.

Las promesas rechazadas manejadas se reconocen como detectadas

El panel Sources ahora reconoce correctamente las promesas rechazadas como detectadas si las controlaste con .catch() o .then() de dos argumentos.

En otras palabras, cuando está activada la opción Fuentes > Puntos de interrupción > check_box Pausar en excepciones no detectadas, el depurador no se detendrá en sentencias similares a las siguientes:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

El antes y el después de reconocer rechazos detectados.

Problema de Chromium: 40283993.

Causas del error en la consola

Ahora, Console te muestra cadenas de causas de errores en el seguimiento de pila, si las hubiera.

Para facilitar la depuración, puedes especificar las causas del error cuando detectes y vuelvas a arrojar errores. A medida que la consola avanza por la cadena de la causa, imprime cada pila de errores con un prefijo Caused by:, por lo que aún puedes ver el error original.

El antes y el después de imprimir seguimientos de pila con los prefijos `Caused by`.

Problema de Chromium: 40182832.

Mejoras en el panel de red

Esta versión ofrece varias mejoras en el panel Red.

Inspecciona los encabezados de Early Hints

Los encabezados Early Hints obtienen una sección dedicada en la pestaña Headers de la solicitud del panel Network. Anteriormente, podías encontrar los encabezados relevantes en la sección Encabezados de respuesta.

Early Hints es un código de estado HTTP (103 Early Hints) que se usa para enviar una respuesta HTTP preliminar antes de una respuesta final. Esto permite que un servidor envíe sugerencias al navegador sobre subrecursos críticos (por ejemplo, una hoja de estilo o JavaScript crítico) u orígenes que probablemente utilizará la página mientras el servidor está ocupado generando el recurso principal.

El antes y el después de agregar una sección dedicada para Sugerencias iniciales.

Si deseas obtener más información, consulta Cargas más rápidas de páginas con el tiempo de pensamiento del servidor y Sugerencias anticipadas.

Problema de Chromium: 40222701.

Cómo ocultar la columna Waterfall

Ahora puedes ocultar la columna Waterfall en el panel Network de manera similar a como puedes ocultar otras columnas. Haz clic con el botón derecho en cualquier nombre de columna y desmarca la casilla de verificación check_box_outline_blank de Waterfall en el menú desplegable.

El antes y el después de agregar la opción para ocultar la columna Waterfall.

Problema de Chromium: 40574989.

Mejoras en el panel de rendimiento

Esta versión ofrece varias mejoras en el panel Rendimiento.

Capturar estadísticas del selector de CSS

El panel Performance tiene un nuevo parámetro de configuración que te permite capturar estadísticas del selector CSS para eventos Recalculate Style de larga duración.

Para ver las estadísticas, selecciona un evento Recalculate Style y abre la nueva pestaña Estadísticas del selector. En la pestaña, se muestra información sobre el tiempo transcurrido, los intentos de coincidencias y el recuento, y el porcentaje de rutas lentas no coincidentes para cada selector.

El antes y el después de agregar estadísticas del selector.

Problema de Chromium: 324282954.

Cambia el orden y oculta las pistas

El panel Rendimiento cuenta con un nuevo modo de configuración que te permite cambiar el orden de las pistas y ocultarlas.

Para ingresar al modo de configuración, haz clic en el botón edit Edit a la izquierda del nombre del segmento. Luego, haz clic en arrow_upward hacia arriba o en arrow_downward hacia abajo para mover el recorrido o en visibility_off para ocultarlo. Cuando termines, haz clic en el botón Listo Verificar que se encuentra a la derecha del nombre del segmento.

La próxima versión, Chrome 126, incluirá más mejoras en esta IU.

Problema de Chromium: 311439339.

Ignora los contratos de servicio en el panel de Memoria

Ahora puedes ignorar los retenedores en las instantáneas de montón que capturas con el panel Memory.

Para ignorar un contrato de servicio, selecciona un objeto y, en la sección Retainer, haz clic con el botón derecho en un contrato de servicio y selecciona Ignorar este contrato de servicio en el menú desplegable. Los contratos de servicio omitidos se marcan con el valor ignored en la columna Distance. Para dejar de ignorar, haz clic en Restablecer contratos de servicio ignorados en la barra de acciones de la parte superior.

El antes y el después de agregar una opción para ignorar los contratos de servicio.

Además, las instantáneas de montón ahora admiten una mayor cantidad (cientos de millones) de nodos y perímetros de contención (332350576).

Problema de Chromium: 327337527.

Lighthouse 11.7.1

El panel Lighthouse ahora ejecuta Lighthouse 11.7.1. Consulta la lista completa de cambios.

Entre los cambios importantes, se encuentra la compatibilidad obsoleta con el complemento Publisher Ads, que dejó de estar disponible en esta versión.

El antes y el después de agregar la compatibilidad con el complemento de anuncios para publicadores

Para conocer los conceptos básicos del uso del panel Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: optimiza la velocidad del sitio web.

Problema de Chromium: 772558.

Otros aspectos destacados

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

El panel de la Grabadora ya no tiene el estado de vista previa (329271496).
Console ahora no muestra un error cuando un formateador personalizado muestra un null para la función body(), que es un comportamiento válido (329400119).
El panel Sources actualizó el resaltador de sintaxis, en particular, ahora admite las marcas v y d en la expresión regular.
En la pestaña Red > Cookies, se corrigió un error relacionado con la asignación de cookies exentas a cookies de respuesta (41491846).
Ahora la pestaña Elementos > Estilos hace lo siguiente:
- Muestra reglas heredadas completamente sobrecargadas con propiedades personalizadas (41489874).
- Destaca el valor aplicado en claro-oscuro() según el tema de color (331123816).

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).