En Chrome 144, el equipo lanzó una función muy esperada para el servidor MCP de Herramientas para desarrolladores de Chrome: el nuevo panel Request conditions y mejoras para depurar fuentes y hojas de estilo adoptadas.
Con esto, concluimos la notable lista de funciones que lanzamos a lo largo del 2025. ¿Quieres ver si te perdiste alguno? Luego, consulta los aspectos destacados a continuación o explora nuestras ediciones anteriores de Novedades de las Herramientas para desarrolladores.
Actualizaciones del servidor de MCP de Herramientas para desarrolladores
Se implementaron varias correcciones para el servidor de MCP de DevTools y se lanzó la versión 0.12.1. Esta versión incluye una nueva función clave, la conexión automática, que te permite volver a usar una sesión del navegador existente. Con la conexión automática, puedes comenzar a depurar en Chrome y, luego, dirigir el MCP de DevTools a la misma instancia de Chrome para continuar donde lo dejaste.
En la entrada de blog relacionada, obtén más información sobre la conexión automática para el MCP de Herramientas para desarrolladores. Consulta el registro de cambios público en GitHub para ver la lista completa de cambios y correcciones de errores.
Limitación de solicitudes de red individuales
El panel Bloqueo de solicitudes de red cambió su nombre a Condiciones de la solicitud. Además de bloquear solicitudes, este panel ahora también te permite limitar solicitudes individuales.
Abre el panel desde ⋮ > Más herramientas > Condiciones de solicitud. Activa la casilla de verificación Habilitar el bloqueo y la limitación para habilitar el bloqueo de solicitudes. Haz clic en el botón + para agregar un nuevo patrón de texto. Haz clic en el ícono para descartar todas las reglas.
Obtén información para limitar las solicitudes de red individuales en la documentación actualizada.
Cómo editar las reglas @font-face y @font-feature-values
@font-face y @font-feature-values ahora se muestran en el panel Estilos y se pueden editar desde allí.
Hojas de estilo adoptadas en el panel de Elements
El panel Elements ahora muestra las hojas de estilo adoptadas en las raíces de sombra y las raíces del documento. Esto facilita que quienes trabajan con hojas de estilo construidas encuentren las hojas de estilo que afectan sus elementos y depuren los estilos, en especial cuando no se aplican de forma inesperada.
Novedades de las Herramientas para desarrolladores en 2025
Innovaciones en IA
Comenzando con Console insights, las innovaciones basadas en IA se han convertido en una parte integral de las Herramientas para desarrolladores de Chrome, y el panel de asistencia de IA es el centro principal para la depuración asistida por IA que tiene en cuenta el contexto. Con las sugerencias de código en los paneles Console y Sources, y las anotaciones automáticas de Gemini en tus registros de Performance, DevTools ofrece un conjunto integral de herramientas potenciadas por IA para optimizar tus flujos de trabajo.
- Correcciones de diseño de extremo a extremo: Pídele a Gemini que corrija problemas de CSS y, en combinación con los Espacios de trabajo, guarda esos cambios directamente en tus archivos fuente en el disco.
- Pregunta sobre el rendimiento: Ahora puedes analizar un registro de rendimiento completo con asistencia de IA, profundizar en cualquier estadística de rendimiento o usar Gemini para anotar un registro.
- Depuración visual: El panel de asistencia de IA se volvió multimodal, lo que te permite subir imágenes o tomar capturas de pantalla para ayudar a Gemini a comprender y ayudarte a depurar errores visuales.
Rendimiento
Rediseñamos el panel Rendimiento para que la depuración del rendimiento sea menos abrumadora y más práctica. Por ejemplo, un registro grabado ahora incluye estadísticas seleccionadas que te ayudan a identificar cuellos de botella y navegar por los registros más rápido. Otras mejoras incluyen lo siguiente:
- Estadísticas prácticas: Presentamos un conjunto sólido de Estadísticas de rendimiento que identifican problemas específicos, como el LCP por fase, los causantes de cambios de diseño y la latencia de solicitudes de documentos.
- Contexto del mundo real: Integramos los datos de campo y los datos de CrUX directamente en el panel Rendimiento, lo que te permite validar los resultados del lab en función de las experiencias de los usuarios reales.
- Contexto del framework: Angular v20 y React v19.2 ahora usan la API de extensibilidad. Comprender los cuellos de botella del subproceso principal es más fácil con una vista directa del árbol de componentes. Queremos agradecer nuestra asociación con los equipos de Angular y React.
- Colaboración mejorada: Compartir registros ahora es más fácil gracias a la capacidad de anotar registros y a las opciones para exportar contenido de recursos y mapas de origen, lo que garantiza que un colega o tu yo del futuro tengan todo el contexto que necesitan.
Plataforma web
DevTools se mantuvo al ritmo de la evolución de la plataforma web y agregó herramientas específicas para las especificaciones de CSS más recientes, a la vez que mejoró la experiencia del desarrollador para las funciones establecidas.
Agregamos un seguimiento detallado para las cadenas complejas de variables de CSS, la disponibilidad de la línea de base en las sugerencias sobre propiedades y, recientemente, incorporamos la compatibilidad con la depuración de animaciones de entrada complejas con la regla @starting-style y un editor visual para el nuevo diseño display: masonry.
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 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 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 de las Herramientas para desarrolladores de YouTube.