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 la consola con Gemini

Esta versión de Chrome incorpora capacidades de IA generativa a la consola de Herramientas para desarrolladores, con el objetivo de que comprendas 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 Comprende este error (advertencia) junto al mensaje en la consola 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 los 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 que admiten las reglas de CSS @position-try.

Para obtener más información, consulta Presentación de la API de posicionamiento de anclajes de CSS.

Problema de Chromium: 40279608.

Mejoras en el panel de fuentes

Esta versión incluye varias mejoras en el panel Sources.

Configurar la impresión con presentación automática y el cierre con corchete

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

Para configurar el comportamiento relevante, marca o desmarca las nuevas opciones de casilla de verificación corchetes de cierre automático y check_box Imprimir automáticamente las fuentes reducidas con formato estilístico en configuración Configuración > Preferencias > Fuentes.

El antes y el después, y se agregaron nuevos parámetros de configuración para la impresión con formato estilístico y el cierre con corchetes.

Problemas de Chromium: 40865010, 324314570.

Las promesas rechazadas controladas se reconocen como atrapadas

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

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

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

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

Problema de Chromium: 40283993.

Causas de los errores en Console

La consola ahora te muestra las cadenas de causas de errores en el seguimiento de pila, si las hubiera.

Para facilitar la depuración, puedes especificar las causas de los errores cuando los detectes y los vuelvas a mostrar. A medida que la consola sigue la cadena de causa, imprime cada pila de errores con un prefijo Caused by: para que puedas ver el error original.

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

Problema de Chromium: 40182832.

Mejoras en el panel de red

Esta versión incluye varias mejoras en el panel Network.

Cómo inspeccionar los encabezados de sugerencias anticipadas

Los encabezados de sugerencias iniciales tienen 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 la página usará, mientras el servidor está ocupado generando el recurso principal.

El antes y el después, y ahora una sección exclusiva para Early Hints.

Para obtener más información, consulta Cargas más rápidas de páginas mediante el tiempo de pensamiento del servidor con sugerencias tempranas.

Problema de Chromium: 40222701.

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 el nombre de cualquier columna y desmarca la casilla de verificación check_box_outline_blank Waterfall en el menú desplegable.

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

Problema de Chromium: 40574989.

Mejoras en el panel de rendimiento

Esta versión incluye varias mejoras en el panel Performance.

Captura las estadísticas del selector CSS

El panel Rendimiento recibe 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 Selector Stats. La pestaña te muestra información sobre el tiempo transcurrido, el recuento y los intentos de coincidencia, y el porcentaje de rutas de acceso lentas sin coincidencias para cada selector.

Estadísticas del selector de antes y después de agregar

Problema de Chromium: 324282954.

Cómo cambiar el orden y ocultar las pistas

El panel Performance cuenta con un nuevo modo de configuración que te permite cambiar el orden de los segmentos y ocultarlos.

Para ingresar al modo de configuración, haz clic en el botón editar Editar situado a la izquierda del nombre del segmento. Luego, haz clic en arrow_upward hacia arriba o arrow_downward hacia abajo para mover el recorrido o haz clic en visibility_off para ocultar. Haz clic en el botón Listo Verificar a la derecha del nombre del segmento cuando termines.

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

Problema de Chromium: 311439339.

Cómo ignorar los retenedores en el panel Memoria

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

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

El antes y el después y agrega una opción para ignorar los retenedores.

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

Problema de Chromium: 327337527.

Lighthouse 11.7.1

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

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

La adición de antes y después de la eliminación de la compatibilidad con el complemento de Publisher Ads

Para aprender los conceptos básicos del uso del panel Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: Cómo optimizar la velocidad del sitio web.

Problema de Chromium: 772558.

Otros aspectos destacados

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

El panel Grabadora ya no está disponible en 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 las expresiones regulares.
La pestaña Red > Cookies corrigió un error relacionado con la asignación de cookies exentas a cookies de respuesta (41491846).
En la pestaña Elementos > Estilos, ahora se hace lo siguiente:
- Se muestran las 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 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 plataforma 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.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar 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.