Barra de filtros optimizada en el panel de red
Se rediseñó la barra de filtros para que puedas filtrar solicitudes con mayor facilidad y ordenar el panel Network.
El experimento correspondiente se activó de forma predeterminada en esta versión, pero se revertirá. Puedes realizar un seguimiento del progreso en crbug.com/1523150.
La nueva barra de filtros tiene dos menús desplegables: uno para elegir tipos de solicitudes y otro para ocultar URLs de datos y extensiones, o bien mostrar solo las cookies y las solicitudes bloqueadas, y las solicitudes de terceros. Ambos menús admiten la selección múltiple.
Para volver a la barra de filtros anterior de inmediato, desactiva Configuración > Experimentos > Rediseño de la barra de filtros en el panel de red.
No dudes en dejar tus comentarios sobre la función en crbug.com/1500573.
Error de Chromium: 1486431.
Mejoras en los elementos
Compatibilidad con @font-palette-values
Ahora el panel Elements admite la regla@font-palette-values de CSS. Te permite personalizar los valores predeterminados de la propiedad font-palette.
En Estilos, haz clic en el valor de la propiedad font-palette y DevTools te llevará a la sección dedicada @font-palette-values, en la que podrás editar tus valores personalizados.
Error de Chromium: 1501781.
Caso admitido: Propiedad personalizada como alternativa de otra propiedad personalizada
Elements > Styles ahora resuelve una propiedad personalizada que es un resguardo de otra propiedad personalizada.
Error de Chromium: 1499265.
Compatibilidad mejorada con mapas de origen
El parámetro de configuración Settings > Experiments > Resolve variable names in expressions using source maps se activó de forma predeterminada.
Las Herramientas para desarrolladores usan mapas de origen para permitirte depurar tu código original en Fuentes y Alcance incluso después de que lo hayas combinado, reducido o compilado. Este experimento te permite evaluar los nombres de tus variables originales de manera coherente en Herramientas para desarrolladores, incluidos los siguientes:
Expresiones en la consola y sugerencias de autocompletar
-
-
Puntos de interrupción condicionales y puntos de registro
Para obtener más detalles, consulta el RFC correspondiente.
Error de Chromium: 1444349.
Mejoras en el panel de rendimiento
Pista de interacciones mejoradas
El segmento Rendimiento > Interacciones incluye bigotes que indican los retrasos en la entrada y la presentación en los límites del tiempo de procesamiento.
Además, cuando colocas el cursor sobre una interacción, puedes ver un cuadro de información útil con detalles sobre los tiempos.
Error de Chromium: 1495751.
Filtrado avanzado en las pestañas Bottom-Up, Call Tree y Event Log
Las pestañas Bottom-Up, Call Tree y Event Log del panel Rendimiento tienen tres botones nuevos para el filtrado avanzado:
- Coincidir mayúsculas y minúsculas.
- Expresión regular.
- Coincidir palabra completa.
Además, para ayudarte a conservar el contexto, ahora solo los elementos de nivel superior coinciden con el filtro en la pestaña De abajo hacia arriba. Anteriormente, el filtro coincidía con todos los nodos.
Error de Chromium: 1496355.
Marcadores de sangría en el panel de Sources
El Editor del panel Fuentes ahora marca los bloques de código con sangría con líneas verticales para tu comodidad.
Error de Chromium: 1479986.
Sugerencias útiles para los encabezados y el contenido anulados en el panel de red
El panel Network ahora muestra Tooltips cuando colocas el cursor sobre el ícono de punto morado junto a las pestañas Headers y Response de una solicitud. La información sobre herramientas te indica qué anuló Herramientas para desarrolladores.
Error de Chromium: 1469776.
Nuevas opciones del menú de comandos para agregar y quitar patrones de bloqueo de solicitudes
Ahora puedes escribir comandos para agregar o quitar patrones de bloqueo de solicitudes de red en el menú de comandos.
El comando Agregar te lleva al diálogo para especificar el patrón, y el comando Quitar quita todos los patrones sin abrir el panel Bloqueo de solicitudes de red.
Se quitó el experimento de incumplimientos de CSP
Se quitó la pestaña experimental Incumplimientos de la CSP que se introdujo en la versión 89 porque era redundante.
Para ver los detalles de la CSP de un vistazo, navega a Aplicación > Marcos > Política de seguridad del contenido (CSP).
Además, el panel Problemas informa los incumplimientos de la CSP.
Lighthouse 11.3.0
El panel Lighthouse ahora ejecuta Lighthouse 11.3.0. Consulta la lista completa de cambios. Entre los cambios notables, se incluye la capacidad de generar informes sobre las páginas de error 404.
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.
Accesibilidad
Esta versión incluye las siguientes mejoras de accesibilidad:
- En Network > Payload, ahora puedes enfocar con la tecla Tab los botones view source y view URL-encoded, y presionar Intro o Espacio para activar la acción correspondiente.
- En Console, para reducir la confusión, los vínculos que dirigen a secuencias de comandos que ya no están disponibles para el Debugger ahora aparecen en gris y no se pueden hacer clic.
- En los árboles de navegación, como el árbol en Fuentes > Página, la tecla Intro ahora expande y contrae los nodos con elementos secundarios.
Problemas de Chromium: 1338391, 1500662, 1420362.
Otros aspectos destacados
Estas son algunas de las correcciones y mejoras más importantes de esta versión:
- Rendimiento. Si falla una grabación, ahora tienes la opción de descargar los eventos de registro sin procesar y tratar de averiguar qué salió mal (confirmar).
- La combinación de teclas Mostrar consola (Ctrl + ` para Mac, Ctrl + + para Windows y Linux) ahora no solo abre la Consola, sino que también se cierra cuando se presiona por segunda vez.
- Recursos para desarrolladores Se corrigió un error que impedía informar los recursos de CSS y sus problemas (1420362).
- Elementos:
- Se corrigió un error relacionado con la inspección de elementos en elementos iframe (1453375).
- Calculado: Se corrigió un error que impedía que se renderizaran los valores predeterminados (1499882).
- Search. Se corrigió un error que impedía calcular la cantidad de coincidencias para búsquedas cortas de uno o dos caracteres (1416457).
- Consola Ahora se analizan correctamente las expresiones regulares que terminan con un carácter de escape en el cuadro Filtro (1346936).
- Configuración > Workspace Se corrigió un error que impedía agregar una carpeta excluida (1503580).
- Red > Vista previa. Ahora renderiza imágenes con URIs
data:(1381791). - Memoria Se agregaron los botones de carga y de guardar adecuados a la barra de acciones (1275407).
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
- 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ú en 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
- Cómo ver el historial de chat de IA
- Administra el almacenamiento de extensiones en Application > Storage
- Mejoras en el rendimiento