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 encuentres.
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 la consola y sigue las instrucciones.
Para obtener más información, consulta Cómo comprender mejor los errores y las advertencias con la IA.
Compatibilidad con reglas de @position-try en Elements > Styles
Para ayudarte a depurar el posicionamiento de anclaje de CSS, la pestaña Elements > Styles ahora admite reglas de CSS @position-try. 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 Presentamos la API de posicionamiento de anclaje de CSS.
Problema de Chromium: 40279608.
Mejoras en el panel de fuentes
Esta versión incluye varias mejoras en el panel Fuentes.
Configura el cierre automático de corchetes y el formato de impresión
Ahora puedes activar o desactivar el cierre de corchetes y el formato automático en el Editor de Fuentes. La impresión con formato hace que los archivos reducidos sean legibles. El cierre automático de corchetes agrega automáticamente un corchete de cierre () o }) o una etiqueta (>) cuando escribes uno de apertura.
Para configurar el comportamiento pertinente, marca o desmarca las nuevas opciones Cierre automático de corchetes y Formatear automáticamente las fuentes comprimidas en Configuración > Preferencias > Fuentes.
Problemas de Chromium: 40865010, 324314570.
Las promesas rechazadas controladas se reconocen como capturadas
El panel Fuentes ahora reconoce correctamente las promesas rechazadas como capturadas si las controlaste con .catch() o .then() de dos argumentos.
En otras palabras, cuando se activa Fuentes > Puntos de interrupción > Pausar en excepciones no detectadas, el depurador no se detendrá en instrucciones similares a las siguientes:
Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));
Problema de Chromium: 40283993.
Causas de errores en la consola
La consola ahora muestra cadenas de causas de error en el seguimiento de pila, si hay alguna.
Para facilitar la depuración, puedes especificar las causas de los errores cuando los detectes y los vuelvas a arrojar. A medida que la consola recorre la cadena de causas, imprime cada pila de errores con un prefijo Caused by:, de modo 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 Early Hints
Los encabezados de Early Hints tienen una sección dedicada en la pestaña Encabezados de la solicitud del panel Red. Anteriormente, podías encontrar los encabezados pertinentes 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 sobre orígenes que probablemente usará la página, mientras el servidor está ocupado generando el recurso principal.
Para obtener más información, consulta Cargas de páginas más rápidas con el tiempo de procesamiento del servidor y Early Hints.
Error de Chromium: 40222701.
Oculta la columna Cascada.
Ahora puedes ocultar la columna Cascada en el panel Red de la misma manera en que puedes ocultar otras columnas. Haz clic con el botón derecho en cualquier nombre de columna y desmarca la casilla de verificación Cascada en el menú desplegable.
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 del selector 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 de coincidencia y el recuento, y el porcentaje de no coincidencias de la ruta lenta para cada selector.
Error de Chromium: 324282954.
Cómo cambiar el orden y ocultar 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 a la izquierda del nombre de la pista. Luego, haz clic en hacia arriba o hacia abajo para mover la pista, o bien haz clic en para ocultarla. Cuando termines, haz clic en el botón Verificar a la derecha del nombre de la pista.
La próxima versión, Chrome 126, incluirá más mejoras en esta IU.
Problema de Chromium: 311439339.
Ignorar los retenedores en el panel de Memory
Ahora puedes ignorar los objetos retenedores en las instantáneas del 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 ignorados se marcan con el valorignoreden la columna Distancia. Para dejar de ignorarlos, haz clic en Restablecer los 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 bordes y nodos de contención (332350576).
Error 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 notables, se encuentra la compatibilidad obsoleta con el complemento Publisher Ads, que quedó desactualizado en esta versión.
Para conocer los conceptos básicos del uso del panel Lighthouse en las Herramientas para desarrolladores, 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 Grabadora ya no está en versión preliminar (329271496).
- Ahora, la consola no muestra un error cuando un formateador personalizado devuelve un
nullpara la funciónbody(), lo que es un comportamiento válido (329400119). - El panel Fuentes actualizó el resaltador de sintaxis y, en particular, ahora admite las marcas
vyden 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 Elements > Styles hace lo siguiente:
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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.
Comunícate con el equipo de Herramientas para desarrolladores de Chrome
Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.
- Envíanos tus comentarios y solicitudes de funciones a crbug.com.
- Informa un problema de Herramientas para desarrolladores con Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
- Envía un tuit a @ChromeDevTools.
- Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.
Novedades de Herramientas para desarrolladores
Una lista de todo lo que se abordó en la serie Novedades de DevTools
- Actualizaciones del servidor de MCP de las Herramientas para desarrolladores
- Mejoras en el uso compartido de rutas
- Compatibilidad con @starting-style
- Widget del editor para la visualización: mampostería
- Lighthouse 13
- Sugerencias de código de Gemini
- Mejoras en el servidor de MCP de Herramientas para desarrolladores
- Acceso más rápido a la asistencia de IA
- Cómo depurar el registro de rendimiento completo con Gemini
- Activar o desactivar la orientación del panel lateral
- Programa para desarrolladores de Google
- Otros aspectos destacados
- Herramientas para desarrolladores de Chrome (MCP) para tu agente de IA
- Cómo depurar el árbol de dependencias de red con Gemini
- Cómo exportar tus chats con Gemini
- Configuración de seguimiento persistente en el panel Rendimiento
- Cómo filtrar solicitudes de red protegidas por IP
- La pestaña Elements > Layout agrega compatibilidad con el diseño de mampostería
- Lighthouse 12.8.2
- Otros aspectos destacados
- Depura más estadísticas con Gemini
- Emula el encabezado "Save-Data" en "Condiciones de red"
- Cómo ver el estado de Baseline en la información sobre herramientas de una propiedad de CSS
- Cómo anular los factores de forma en las sugerencias de clientes de usuario-agente
- Lighthouse 12.8.0
- Otros aspectos destacados
- Herramientas para desarrolladores de Chrome más confiables y productivas
- Cómo subir imágenes en la asistencia de IA para el diseño
- Cómo agregar encabezados de solicitud a la tabla en Red
- Consulta los momentos destacados de Google I/O 2025
- Otros aspectos destacados
- Mejoras en el panel Rendimiento
- Orígenes conectados previamente en la estadística "Árbol de dependencias de red"
- Tiempos de respuesta y redireccionamiento del servidor en la estadística "Latencia de solicitud de documento"
- Redireccionamientos en el resumen de solicitudes de red
- Se redujo el ruido en el registro de rendimiento
- Se dejó de usar "Inhabilitar las muestras de JavaScript"
- Parámetro de precisión de la ubicación geográfica en Sensors
- Mejoras en el panel Elementos
- Depura valores de CSS complejos con mayor facilidad
- Compatibilidad con@function en Elements > Styles
- Mejoras en el panel de red
- Filtro has-request-header
- Sockets directos en apps web aisladas
- Otros aspectos destacados
- Accesibilidad
- Edición de Google I/O 2025
- Cómo modificar y guardar cambios de CSS en tu espacio de trabajo con Gemini
- Conecta una carpeta del espacio de trabajo y guarda los cambios en tus archivos fuente
- Pregúntale a Gemini sobre las estadísticas de rendimiento
- Anota los resultados del rendimiento con Gemini
- Agrega capturas de pantalla a tus chats con Gemini
- Nuevos análisis en el panel Rendimiento
- JavaScript duplicado
- JavaScript heredado
- Las especulaciones ahora admiten etiquetas de reglas
- Lighthouse 12.6.0
- Otros aspectos destacados
- Accesibilidad
- Mejoras en el panel Rendimiento
- Nuevos estadísticas de rendimiento
- Haz clic para destacar
- Tiempos del servidor en el resumen de solicitudes de red
- Cómo filtrar cookies en "Privacidad y seguridad"
- Tamaños en unidades de kB en tablas de todos los paneles
- La función de autocompletar admite corner-shape y corner-*-shape en Elements > Styles
- Experimental: Destaca problemas con elementos y atributos en el DOM
- Lighthouse 12.5.0
- Otros aspectos destacados
- Mejoras en el panel Rendimiento
- Vínculos de origen y de secuencia de comandos para las llamadas a perfiles y funciones en Rendimiento
- Compatibilidad con datos de campo de LCP por fase
- Estadística del árbol de dependencias de red
- Duración en lugar de tiempo total y propio en Resumen
- Destacado de la pila más pesada
- Se mejoraron los estados vacíos de varios paneles
- Vista de árbol de accesibilidad en Elements
- Lighthouse 12.4.0
- Otros aspectos destacados
- Panel de privacidad y seguridad
- Mejoras en el panel Rendimiento
- Ajustes predeterminados de limitación de la CPU calibrados
- Selecciona diferentes eventos de rendimiento en el mismo chat de IA
- Destacado de datos propios y de terceros en Rendimiento
- Datos de campo en las sugerencias y las estadísticas de la herramienta de marcadores
- Estadística de reprocesamiento forzado
- Estadística "Optimiza el tamaño del DOM"
- Extiende el registro de rendimiento con console.timeStamp
- Mejoras en el panel Elementos
- Valores en tiempo real de los estilos animados
- Compatibilidad con la seudoclase :open y varios seudoelementos
- Copiar todos los mensajes de la consola
- Unidades de bytes en el panel Memoria