Novedades de Herramientas para desarrolladores, Chrome 125

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.

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

Compatibilidad con @position-try reglas en Elementos > Estilos

Para ayudarte a depurar el posicionamiento de los anclajes de CSS, la opción Elementos > La pestaña 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.

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 la nueva check_box corchetes de cierre automático y la check_box Imprimir automáticamente las fuentes reducidas con formato estilístico en check_box Configuración > Preferencias > Fuentes.

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 Fuentes > Puntos de interrupción > check_box Pausar en excepciones no detectadas está activado, el depurador no detendrá en declaraciones similares a las siguientes:

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

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.

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.

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.

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.

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 Retainer, haz clic con el botón derecho en un retenedor y selecciona Retainer 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.

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.

Uno de los cambios más notables es la compatibilidad con el complemento Publisher Ads, que dejó de estar disponible en esta versión.

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 v y d. marcas en una expresión regular.
• Haz clic en Red > La pestaña Cookies corrigió un error relacionado con la asignación de cookies exentas a cookies de respuesta (41491846).
• La opción Elementos > La pestaña 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, 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.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa 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.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.