Compatibilidad con la depuración de WebAssembly
De forma predeterminada, las Herramientas para desarrolladores habilitan Configuración > Experimentos >
WebAssembly Debugging: Enable DWARF support. Para obtener más información, consulta Cómo depurar WebAssembly con herramientas modernas.
Este experimento te permite pausar la ejecución y depurar código C y C++ en apps de Wasm, con toda la información de depuración disponible:
- Tu código fuente original, asignado con la información de depuración de DWARF
- Nombres de funciones comprensibles en la pila de llamadas
- Compatibilidad con puntos de interrupción y mucho más
Para probar la depuración de Wasm, instala la extensión C/C++ DevTools Support (DWARF) y ejecuta el código paso a paso en la demostración de Mandelbrot.
Error de Chromium: 1414289.
Se mejoró el comportamiento de los pasos en las apps de Wasm
Paso a paso en tu código original ahora evita la pausa en el desensamblado (archivo
.wasm). Anteriormente, se detenía allí.
Sin embargo, la ejecución paso a paso finaliza cuando se sale de la función en la que se inició, por ejemplo, después de volver de la función.
Este comportamiento está habilitado de forma predeterminada en Configuración > Preferencias > Fuentes.
Error de Chromium: 1418938.
Cómo depurar Autocompletar con el panel Elementos y la pestaña Problemas
Autocompletar de Chrome completa formularios automáticamente con la información guardada, como tus direcciones o información de pago. Para que puedas depurar fácilmente los problemas relacionados con la función de autocompletar, el panel Elements ahora puede destacarlos con subrayados rojos rizados.
Para probar esta función, habilita Configuración > Experimentos >
Destaca un nodo o atributo infractor en el árbol DOM del panel Elementos y, luego, inspecciona esta página de demostración.
Coloca el cursor sobre un problema destacado en el árbol del DOM y haz clic en Ver problema para abrir la pestaña Problemas, que enumera todos los problemas detectados y proporciona pistas sobre lo que salió mal.
Error de Chromium: 1399414.
Aserciones en la Grabadora
El panel Recorder ahora te permite agregar aserciones directamente durante la grabación, con todos los datos de tiempo de ejecución disponibles.
Para agregar una aserción, inicia una nueva grabación, interactúa con tu página y haz clic en Agregar aserción. El Grabador inserta un paso con el tipo waitForElement que puedes personalizar sobre la marcha. Mira el video para ver las aserciones en acción en la demostración del carrito de café.
En este video, se muestra cómo realizar las siguientes aserciones:
- Atributos HTML, por ejemplo, el
classde un elemento - Propiedades de JavaScript en JSON, por ejemplo,
.innerText.
También puedes configurar pasos para confirmar, por ejemplo, instrucciones condicionales en JavaScript, cantidad de elementos secundarios del nodo (count), visibilidad del elemento y mucho más. Para obtener más información, consulta Cómo configurar pasos.
Además, el Grabador ahora recuerda tu formato de secuencia de comandos preferido en la vista de código lado a lado y en el menú de pasos que aparece cuando haces clic con el botón derecho.
Error de Chromium: 1423624.
Lighthouse 10.1.1
El panel Lighthouse ahora ejecuta Lighthouse 10.1.1, con un cambio notable introducido en 10.1.0. Todas las auditorías que se relacionan con URLs ahora se agrupan por entidad y agregan estadísticas numéricas, como el tamaño o la duración. Los terceros populares también se etiquetan con su categoría para que sea más fácil identificar su propósito en la página.
Para conocer los conceptos básicos del uso del panel Lighthouse en las Herramientas para desarrolladores, consulta Lighthouse: Optimiza la velocidad del sitio web.
Problema de Chromium: 772558.
Mejoras en el rendimiento
performance.mark() muestra el tiempo cuando se coloca el cursor sobre él en Rendimiento > Tiempos
El método performance.mark() ahora muestra su sincronización cuando colocas el cursor sobre la marca correspondiente en Rendimiento > Sincronizaciones. La sincronización aquí es una marca de tiempo relativa al evento de navegación anterior.
Problema de Chromium: 1426762.
El comando profile() completa la sección Rendimiento > Principal
Los comandos profile() y profileEnd() de la consola ahora inician y detienen la generación de perfiles de CPU en el subproceso principal del panel Rendimiento.
Problema de Chromium: 1429191.
Advertencia por interacciones lentas del usuario
Las interacciones del usuario que duran más de 200 milisegundos reciben una advertencia de Interaction to Next Paint (INP) en la pestaña Rendimiento > Resumen.
Además, el ID de la interacción se trasladó de la sugerencia a Resumen.
Problemas de Chromium: 1432512 y 1432509.
Se movió el segmento de Métricas web
En el panel Rendimiento, se quitaron los siguientes segmentos:
- La pista de Métricas web En cambio, consulta los tiempos relevantes en el segmento Tiempos cuando coloques el cursor sobre él.
- Es el subpista Long Tasks. Ya puedes encontrar esas tareas en el carril principal sombreado en rojo y con un triángulo rojo.
Los seguimientos de Métricas web y Tareas largas contenían información duplicada en otros lugares. Además, no eran interactivas en comparación con sus alternativas más completas, que proporcionan información más detallada cuando se hace clic en ellas.
Además, el segmento Experiences cambió su nombre a Layout Shifts para reflejar con mayor precisión su uso.
Obtén más información sobre las Métricas web.
Baja del generador de perfiles de JavaScript: Fase tres
Desde Chrome 58, el equipo de Herramientas para desarrolladores planeó, con el tiempo, desaprobar el Perfilador de JavaScript y hacer que los desarrolladores de Node.js y Deno usen el panel Rendimiento para generar perfiles del rendimiento de la CPU de JavaScript.
La versión 114 de Herramientas para desarrolladores inicia la tercera fase de la baja del Generador de perfiles de JavaScript de cuatro fases. Durante esta fase, se quitará el panel JavaScript Profiler de Herramientas para desarrolladores, pero podrás habilitarlo de forma temporal a través de Configuración > Experimentos y abrirlo desde el menú de tres puntos
.
Para generar un perfil del rendimiento de la CPU, usa el panel Rendimiento.
Error de Chromium: 1428026.
Otros aspectos destacados
Estas son algunas correcciones destacadas en esta versión:
- El selector de color ahora detecta valores HWB que están fuera de la gama cuando se recortan (1429271).
- El panel Fuentes:
- Se habilitó el resaltado de sintaxis JSON para los mapas de origen (1385374).
- Se dejó de mostrar el mensaje "Se detectó el mapa de fuentes" cuando inhabilitas los mapas de fuentes de forma manual (1423718).
- La consola ahora te permite evaluar expresiones de JavaScript incompletas con Ctrl + Intro y muestra errores de sintaxis (1314700).
- El diálogo de edición de puntos de interrupción ahora tiene un botón de cierre. Anteriormente, debías presionar Intro o quitar el enfoque del diálogo (1412980).
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 analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.
- Envíanos tus comentarios y solicitudes de funciones a crbug.com.
- Informa un problema de DevTools con Más opciones > Ayuda > Informar un problema de DevTools en DevTools.
- Envía un tuit a @ChromeDevTools.
- Deja comentarios en los videos de Novedades de DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.
Novedades de Herramientas para desarrolladores
Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores
- 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 la línea de base 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 la 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 hallazgos de rendimiento con Gemini
- Agrega capturas de pantalla a tus chats con Gemini
- Nuevas estadísticas 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 las 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 Performance
- 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 origen 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 de memoria
- Otros aspectos destacados
- Historial de chat persistente de IA
- Mejoras en el panel Rendimiento
- Estadística de publicación de imágenes
- Navegación con teclado clásica y moderna
- Cómo ignorar los lenguajes de secuencias de comandos irrelevantes en el gráfico de llamas
- Marcador de línea de tiempo y resaltado de rango al colocar el cursor
- Configuración de limitación recomendada
- Marcadores de tiempos en una superposición
- Seguimiento de pila de llamadas de JS en Summary
- Se movió la configuración de insignias al menú de Elementos
- Nuevo panel "Novedades"
- Lighthouse 12.3.0
- Otros aspectos destacados
- Cómo depurar solicitudes de red, archivos fuente y registros de rendimiento con Gemini
- Ver el historial de chat de IA
- Administra el almacenamiento de extensiones en Application > Storage
- Mejoras en el rendimiento
- Fases de interacción en las métricas en vivo
- Información de bloqueo de la renderización en la pestaña Resumen
- Compatibilidad con los eventos de scheduler.postTask y sus flechas de iniciador
- Mejoras en el panel Animations y en la pestaña Elements > Styles
- Cómo ir de Elements > Styles a Animations
- Actualizaciones en tiempo real en la pestaña Calculado
- Emulación de la presión de procesamiento en Sensors
- Objetos JS con el mismo nombre agrupados por fuente en el panel Memoria
- Nuevo aspecto de la configuración
- El panel Estadísticas de rendimiento dejó de estar disponible y se quitó de Herramientas para desarrolladores
- Otros aspectos destacados
- Cómo depurar CSS con Gemini
- Controla las funciones potenciadas por IA en una pestaña de configuración dedicada
- Mejoras en el panel Rendimiento
- Anota y comparte los resultados de rendimiento
- Obtén estadísticas de rendimiento directamente en el panel Rendimiento
- Detecta los cambios de diseño excesivos con mayor facilidad
- Cómo detectar las animaciones no compuestas
- La simultaneidad del hardware se traslada a Sensors
- Ignora las secuencias de comandos anónimas y enfócate en tu código en los seguimientos de pila
- Elements > Styles: Compatibilidad con modos de escritura sideways-* para las superposiciones de cuadrícula y las palabras clave de CSS
- Auditorías de Lighthouse para páginas que no son HTTP en los modos de período y resumen
- Mejoras de accesibilidad
- Otros aspectos destacados
- Mejoras en el panel de red
- Se rediseñaron los filtros de red
- Las exportaciones de HAR ahora excluyen los datos sensibles de forma predeterminada
- Mejoras en el panel Elementos