Novedades de Herramientas para desarrolladores, Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

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 Chispa de la bombilla. Comprende este error (advertencia) junto al mensaje en la consola y sigue las instrucciones.

La explicación generada por IA de un error.

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 position-try-options y vincula cada opción a una sección @position-try --name dedicada.

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

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

Error de Chromium: 40279608.

Mejoras en el panel de fuentes

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

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

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

Para configurar el comportamiento relevante, marca o borra las nuevas opciones Auto closing brackets y Automatically pretty print minified sources en Settings > Preferences > Sources.

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 capturadas si las controlaste con .catch() o .then() de dos argumentos.

En otras palabras, cuando Sources > Breakpoints > Pause on uncaught exceptions está activado, el depurador no se detendrá en instrucciones 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.

Error de Chromium: 40283993.

Causas de 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.

Los seguimientos de pila antes y después de la impresión 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 anticipadas tienen una sección dedicada en la pestaña Encabezados de la solicitud del panel Red. 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.

Antes y después de agregar una sección dedicada a los indicadores anticipados.

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.

Cómo ocultar la columna Cascada

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 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 Rendimiento.

Captura las estadísticas del selector CSS

El panel Rendimiento tiene un nuevo parámetro de configuración que te permite capturar estadísticas de selectores CSS para eventos de Recalcular estilo 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.

Cambia el orden y oculta pistas

El panel Rendimiento tiene 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 Editar situado a la izquierda del nombre del segmento. Luego, haz clic en hacia arriba o hacia abajo para mover la pista o haz clic en para ocultarla. Haz clic en el botón Verificar a la derecha del nombre del segmento cuando termines.

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

Error de Chromium: 311439339.

Ignora los retenedores en el panel Memoria

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

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 omitidos se marcan con el valor ignored en la columna Distancia. Para dejar de ignorarlos, haz clic en Restaurar retenedores ignorados en la barra de acciones de la parte superior.

Antes y después de agregar 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).

Error 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 de 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 importantes en esta versión:

  • El panel de Grabadora ya no está en versión preliminar (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.
  • En la pestaña Red > Cookies, se corrigió un error con la asignación de cookies exentas a cookies de respuesta (41491846).
  • La pestaña Elementos > Estilos ahora hace lo siguiente:
    • Muestra reglas heredadas sobrecargadas por completo 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, 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 Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones, actualizaciones o cualquier otro aspecto relacionado con Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se analizó en la serie Novedades de DevTools.