Novedades de las Herramientas para desarrolladores, Chrome 143

Actualizaciones del servidor de MCP de Herramientas para desarrolladores

Implementamos varias mejoras en el servidor de MCP de DevTools y lanzamos la versión 0.11.0.

  • Cuando le das instrucciones a tu cliente de MCP (Gemini CLI, Cursor, etc.), ahora puedes hacer referencia a los elementos y las solicitudes de red seleccionados en los paneles Elements y Network.
  • La herramienta list_console_messages ahora también incluye los problemas que se muestran en el panel Issues.
  • Ahora se puede usar la nueva herramienta press_key para depurar eventos de teclado no relacionados con elementos de formulario.
  • Ahora se pueden guardar instantáneas del árbol de accesibilidad en el disco
  • Ahora se pueden volver a cargar las páginas, y se puede ignorar la caché de forma opcional
  • Configura la marca --user-data-dir para usar un perfil de Chrome existente

Consulta el registro de cambios público en GitHub para obtener la lista completa de cambios y correcciones de errores, y obtén más información sobre el servidor MCP de DevTools en la entrada de blog del anuncio.

Se mejoró el uso compartido de registros

El diálogo para compartir registros en el panel de rendimiento

Cuando exportas un registro de rendimiento, ahora puedes incluir datos adicionales en el archivo exportado para facilitar la depuración en el futuro o para un colega. Ahora puedes incluir lo siguiente:

  • Contenido de recursos: Una copia de todos los archivos HTML, CSS y JavaScript (excepto las secuencias de comandos de extensiones)
  • Mapas de fuentes de secuencias de comandos: Son asignaciones al código creado que te permiten ver los nombres de las funciones originales y los archivos fuente.

Obtén más información sobre qué compartir y qué es mejor mantener privado en nuestra documentación actualizada.

Queremos agradecer a nuestros colegas de Microsoft, con cuya colaboración se logró este objetivo y quienes lideraron el trabajo inicial para ello.

Compatibilidad con @starting-style

El panel Elements ahora admite la depuración de la nueva regla @starting-style de CSS, que es esencial para crear animaciones de entrada.

Ahora puedes ver un adorno starting-style en el árbol de Elements junto a los elementos pertinentes, activar o desactivar el estado starting-style del elemento haciendo clic en la píldora, y también inspeccionar y depurar el bloque @starting-style en la pestaña Styles.

Widget de editor para la visualización: mampostería

Si experimentas con el diseño de CSS Masonry, ahora puedes usar el mismo widget de editor que conoces de los diseños display: flex y grid para alternar rápidamente entre varias opciones de alineación en los diseños masonry.

Lighthouse 13

El panel Lighthouse ahora ejecuta Lighthouse 13. Con este hito, concluye el trabajo de unificación de las estadísticas de rendimiento en las Herramientas para desarrolladores y Lighthouse.

Obtén más información en la entrada de blog del anuncio. Para saber para qué sirve Lighthouse y cómo se conecta con el panel Rendimiento en Herramientas para desarrolladores, consulta Lighthouse: Optimiza tu sitio web.

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.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de DevTools