Novedades de las Herramientas para desarrolladores (Chrome 152)

Matthias Rohmer

Publicación: 25 de agosto de 2026

Chrome 152 incluye mejoras significativas en la depuración de redes con el reenvío de solicitudes y la inspección de cargas útiles binarias, adornos de elementos personalizados y anidación de CSS mejorada en Elements, Métricas web esenciales para navegaciones suaves en Performance Live Metrics, exportación de tablas estructuradas en la consola y mejoras para el servidor de MCP de Herramientas para desarrolladores.

Herramientas para desarrolladores para agentes

La versión v1.7.0 más reciente del servidor de MCP de Herramientas para desarrolladores de Chrome amplía las capacidades de depuración de memoria que se presentaron anteriormente para agentes de programación como Antigravity, Claude, Codex y otros:

• Detalles del objeto de instantánea del montón (get_heapsnapshot_object_details): Inspecciona las propiedades detalladas del objeto JavaScript, los nombres de las clases y las rutas de retención de la raíz de GC directamente desde las instantáneas del montón.
• Filtrado de contexto de V8 nativo: Filtra objetos de instantáneas del montón por contexto de ejecución nativo y, luego, inspecciona los contextos nativos en los resúmenes de instantáneas.
• Mejoras en la estabilidad y el ciclo de vida del daemon: Se agregó la retención limitada de solicitudes de red por navegación, la validación del ID de sesión, las advertencias de discrepancia de versiones entre la CLI y el daemon, y el cierre ordenado del trabajador en la eliminación del contexto.

Para obtener más información y comenzar, visita el repositorio de DevTools for agents en GitHub.

Red: Edita y vuelve a enviar solicitudes, obtén estadísticas de precarga y decodifica cargas útiles binarias

• Vuelve a enviar solicitudes de recuperación y XHR: El anterior elemento del menú contextual "Repetir XHR" ahora se llama Volver a enviar. Ahora admite todas las solicitudes de red recuperables, ya que convierte las solicitudes estándar en llamadas de fetch() y conserva la fidelidad de reproducción completa junto con XHR. Las solicitudes también hacen un seguimiento de su contexto de ejecución y del originador de la consola, y los muestran.
• Columna Precargado y "Copiar como elemento de precarga": Una nueva columna dedicada Precargado muestra si se inició una solicitud de red con la precarga especulativa. También puedes hacer clic con el botón derecho en cualquier solicitud y seleccionar Copiar como elemento de precarga para generar una etiqueta <link rel="preload"> lista para agregar a tu HTML. Las sugerencias anticipadas ahora se categorizan en la columna Iniciador.
• Visualizador binario para cargas útiles de solicitudes: La pestaña Payload ahora incluye opciones de métodos de decodificación (Base64, hexadecimal y UTF-8) para cargas útiles de solicitudes binarias y comprimidas, lo que refleja la pestaña Response.
• Columna Número de solicitud fijada: La columna Solicitud # ahora está fijada en la primera posición de la cuadrícula de datos de Red para facilitar la referencia de solicitudes.
• Filtrado de hosts del mismo sitio: Ahora, la búsqueda de dominios, nombres de host o puertos (p.ej., localhost o example.com) en la barra de filtros de red filtra con precisión las solicitudes del mismo sitio.
• Decodificación predeterminada de parámetros de búsqueda: Los parámetros de búsqueda y de formulario en la pestaña Payload ahora se decodifican automáticamente para todas las solicitudes.

Problemas de Chromium: 40726969, 41299075, 40138847, 40222701, 525848667, 507077182, 498482622, 520437951, 40267477

Elementos: Adornos de elementos personalizados, interacciones anidadas del selector principal de CSS y selección del seudoelemento $0

Inspeccionar y crear componentes web y CSS modernos es más rápido y más intuitivo en el panel Elementos:

• Insignia de adorno de elemento personalizado: Los elementos HTML personalizados (identificados por etiquetas con guiones o atributos is="..." para elementos integrados personalizados) ahora muestran una insignia de adorno custom-element en el esquema del árbol del DOM.
• Interacciones y especificidad del selector principal de CSS anidado: Cuando se coloca el cursor sobre los selectores principales en reglas CSS anidadas y reglas anidadas heredadas, ahora se destacan los elementos coincidentes en la página y se responde al filtrado de la pestaña Estilos. Se agregaron ventanas emergentes de información sobre herramientas de especificidad para las reglas de @nested-declarations.
• Selección de seudoelementos a través de $0: Seleccionar seudoelementos como ::before o ::after en el árbol del DOM de Elements ahora los vincula directamente a la variable de consola $0 para una inspección inmediata de JavaScript.
• Autocompletado para los tipos text-wrap y <image>: El panel Styles ahora sugiere todos los valores de palabras clave para text-wrap (wrap, nowrap, balance, pretty, stable) y autocompleta las propiedades de CSS que aceptan tipos de datos <image>.
• Conocimiento de la barra de desplazamiento del modelo de caja: El diagrama de métricas del modelo de caja ahora calcula y renderiza con precisión las dimensiones de la caja de contenido cuando los elementos tienen barras de desplazamiento visibles.

Problemas de Chromium: 367440148, 535517817, 535522242, 535523039, 537724428, 399305533, 334984154, 383355294, 326260752, 389342065

Rendimiento: Métricas de navegación suave en Live Metrics y ajustes predeterminados de capturas de pantalla personalizadas

• Compatibilidad con las métricas en tiempo real para las navegaciones suaves: La vista de métricas en tiempo real ahora captura y registra las Core Web Vitals (como LCP y INP) para las navegaciones suaves del cliente en aplicaciones de una sola página de forma predeterminada, gracias a una actualización a web-vitals v6.0.0.
• Ajustes predeterminados personalizados de captura de pantalla: Se expusieron ajustes predeterminados configurables de tamaño y límite de recuento de fotogramas de captura de pantalla para el registro de CDP en el panel Rendimiento para personalizar la fidelidad de la grabación visual dentro de los presupuestos de memoria.
• Revelador de registros de console.profileEnd(): Llamar a console.profileEnd() en tu código o consola ahora abre y revela automáticamente el registro grabado en el panel Rendimiento.
• Resumen de los segmentos personalizados de la API de extensibilidad: Los resúmenes de seguimiento del rendimiento ahora procesan y presentan grupos de seguimiento personalizados registrados con la API de extensibilidad.

Problemas de Chromium: 514721939, 490140054, 536954453, 535506117

Consola: Exporta tablas como Markdown o CSV, y protege contra efectos secundarios

• Copiar tablas de la consola como Markdown o CSV: Las tablas registradas con console.table() ahora se pueden copiar directamente en el portapapeles como tablas de Markdown con formato o datos CSV desde el menú contextual.
• Protección contra la evaluación de efectos secundarios: La evaluación al mantener el cursor sobre el depurador ahora protege contra las expresiones que contienen new, literales de plantilla etiquetados, operadores dinámicos import() y delete, lo que evita mutaciones accidentales del estado mientras se pausa.

Problemas de Chromium: 40924951, 40133606

Otros destacados

A continuación, se incluye una colección de mejoras destacadas en otros subsistemas de las Herramientas para desarrolladores:

• Fuentes: Quick Open ahora prioriza los archivos del espacio de trabajo local con un gran aumento en la puntuación, lo que hace que los archivos del espacio de trabajo se muestren en la parte superior por encima de los recursos de red. (Error de Chromium: 40260136)
• Memoria: La vista Resumen de instantánea del montón ahora muestra los recuentos totales de objetos junto con los tamaños superficiales agregados para los tipos seleccionados y, además, incluye filtros de contexto de ejecución nativo. (Error de Chromium: 497855658)
• Aplicación: En el panel Anuncios, se reubicó el botón de activación Destacar anuncios directamente en el panel, se agregaron IDs de elementos iframe de anuncios en los que se puede hacer clic para revelar los marcos en la jerarquía y se introdujo una tabla de desglose de métricas por marco. (Error de Chromium: 514957134)
• Aplicación: Se rediseñó la sección Borrar datos del sitio en el panel Almacenamiento en un grupo unificado y consolidado (problema de Chromium: 375867286) y se resolvieron las entradas duplicadas de Cache Storage después de las restauraciones de la memoria caché atrás/adelante (problema de Chromium: 484693244).
• Extensiones: Los métodos asíncronos en chrome.devtools.panels ahora devuelven de forma nativa promesas de JavaScript cuando se llaman sin una devolución de llamada. (Error de Chromium: 496604551)
• Configuración: Se dividieron los ajustes predeterminados de limitación de la red y las configuraciones de limitación personalizadas en secciones separadas. (Error de Chromium: 342409451)
• Lighthouse: Se actualizó el módulo Lighthouse incluido a la versión 13.4.1. (Error de Chromium: 40543651)
• Problemas: Las Herramientas para desarrolladores muestran una advertencia cuando una imagen que usa loading="lazy" no tiene dimensiones width o height explícitas.
• Modo de dispositivo: Se simplificó el menú de nivel de zoom con una opción unificada de Ajustar a la ventana y se inhabilitó el botón de activación Mostrar marco del dispositivo cuando no hay gráficos de marco disponibles.

Mejoras de accesibilidad

Chrome 152 incluye las siguientes mejoras de accesibilidad:

• Elements & Accessibility: Se agregaron opciones de menú contextual para cambiar sin problemas entre el árbol DOM de Elements y la vista de árbol de accesibilidad, además de "Desplazarse a la vista" para los nodos de accesibilidad. (Problemas de Chromium: 417929842)
• Accesibilidad: Se agregó compatibilidad para copiar nodos y subárboles del árbol de accesibilidad como texto sin formato con el menú contextual. (Error de Chromium: 417929842)
• Elementos: Se corrigieron los colores de resaltado de búsqueda de contraste bajo fijos en el panel Elementos cuando se ejecuta en modo oscuro. (Error de Chromium: 491718898)
• Navegación: Desacoplar las Herramientas para desarrolladores en una ventana separada o volver a acoplarlas en la pestaña ya no fuerza el enfoque en el botón del menú principal.
• Configuración: Se agregó contexto descriptivo accesible a los botones "Mostrar más" y "Mostrar menos" en la configuración de IA.