Novedades de Herramientas para desarrolladores, Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Comprende mejor los errores y las advertencias de 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 encuentres.

Para obtener una explicación generada por IA de un error o una advertencia, haz clic en el botón Chispa de bombilla. Comprender este error (advertencia) junto al mensaje en Console 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 la IA.

Compatibilidad con reglas @position-try en Elementos > Estilos

Para ayudarte a depurar el posicionamiento de anclas de CSS, la pestaña Elementos > Estilos ahora admite reglas de CSS @position-try. 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 Presentamos la API de posicionamiento de anclas de CSS.

Error de Chromium: 40279608.

Mejoras en el panel de fuentes

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

Configura la impresión elegante y el cierre de corchetes automáticos

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 permite 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 de agregar parámetros de configuración nuevos para la impresión elegante y el cierre de corchetes automáticos.

Problemas de Chromium: 40865010, 324314570.

Las promesas rechazadas controladas se reconocen como capturadas

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

Console ahora muestra cadenas de causas de errores en el seguimiento de pila, si las hay.

Para facilitar la depuración, puedes especificar las causas de los errores cuando capturas y vuelves a lanzar errores. A medida que Console recorre la cadena de causa, imprime cada pila de errores con un prefijo Caused by:, de modo que puedas ver el error original.

Los seguimientos de pila antes y después de la impresión con prefijos "Caused by"

Error de Chromium: 40182832.

Mejoras en el panel de red

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

Inspecciona los encabezados de sugerencias iniciales

Los encabezados de sugerencias anticipadas tienen una sección exclusiva 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) o orígenes que probablemente usará la página, 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 Cómo acelerar la carga de páginas con el tiempo de reflexión del servidor con sugerencias anticipadas.

Error de Chromium: 40222701.

Cómo ocultar la columna Cascada

Ahora puedes ocultar la columna Cascada en el panel Red de la misma manera que puedes ocultar otras columnas. Haz clic con el botón derecho en cualquier nombre de columna y borra la casilla de verificación Cascada en el menú desplegable.

Antes y después de agregar la opción para ocultar la columna Cascada.

Error 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. En la pestaña, se muestra información sobre el tiempo transcurrido, los intentos y el recuento de coincidencias, y el porcentaje de no coincidencias de la ruta lenta para cada selector.

Antes y después de agregar estadísticas del selector.

Error 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 Edit a la izquierda del nombre de la pista. Luego, haz clic en hacia arriba o hacia abajo para mover la pista o haz clic en para ocultarla. Cuando termines, haz clic en el botón Marcar a la derecha del nombre de la pista.

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 Retenedor, 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 del montón ahora admiten una cantidad mayor (cientos de millones) de bordes y nodos de contención (332350576).

Error de Chromium: 327337527

Lighthouse 11.7.1

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

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

Antes y después de agregar y quitar la compatibilidad con el complemento de anuncios del publicador.

Para conocer los aspectos básicos del uso del panel Lighthouse en DevTools, consulta Lighthouse: Optimiza la velocidad del sitio web.

Error de Chromium: 772558.

Otros aspectos destacados

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

  • El panel de Grabadora ya no está en versión preliminar (329271496).
  • Console ahora no muestra un error cuando un formato personalizado muestra un null para la función body(), que es un comportamiento válido (329400119).
  • En particular, el panel Sources actualizó el resaltador de sintaxis, que ahora admite marcas v y d en 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 light-dark() según el tema de color (331123816).

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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

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