Chrome for Developers

DevTools

Las Herramientas para desarrolladores de Chrome son un conjunto de herramientas para desarrolladores web que están integradas directamente en el navegador Google Chrome. Herramientas para desarrolladores te permite editar páginas sobre la marcha y diagnosticar problemas con rapidez, lo que te ayuda a crear mejores sitios web en menos tiempo.

Depura con IA

Explora cómo las innovaciones basadas en IA en Herramientas para desarrolladores te permiten hacer más tareas más rápido. Usa DevTools for agents para conectar la potencia de DevTools a tus agentes de programación favoritos.

Innovaciones en IA

Permite que Gemini te ayude a analizar y mejorar el diseño, la red, las fuentes y el rendimiento de tu sitio web. Obtén ayuda con los errores de la consola y sugerencias de código en los paneles de la consola y de fuentes.

Herramientas para desarrolladores para agentes

Brinda a tus agentes de codificación las mismas herramientas confiables que usas para inspeccionar la actividad de la red, registrar seguimientos y solucionar problemas de aplicaciones web, dentro de tu flujo de trabajo de IA.

Conecta el servidor MCP (Protocolo de contexto del modelo) de las Herramientas para desarrolladores de Chrome a la herramienta que elijas: Antigravity, Claude Code, Cline, Copilot y muchas más.

Comprende el rendimiento

Obtén una vista integral y práctica del rendimiento de tu página.

Cómo inspeccionar recursos

Aprende a inspeccionar los recursos que carga tu página y a editarlos desde el navegador.

Cómo analizar la red

Analiza y reemplaza las solicitudes y respuestas de red sobre la marcha.

Sugerencias sobre herramientas para desarrolladores

Explora nuestra serie de videos mensuales que te guiarán por situaciones comunes de depuración en las Herramientas para desarrolladores de una manera divertida.

Emula experiencias del usuario con agentes de codificación

Las Herramientas para desarrolladores de Chrome para agentes permiten que tu agente verifique diseños responsivos, pruebe APIs que tienen en cuenta la ubicación y simule diversas velocidades de CPU o de red.

Automatiza las auditorías de Lighthouse con agentes de programación

Lighthouse en las Herramientas para desarrolladores de Chrome para agentes permite que tu agente de programación evalúe la calidad del sitio web realizando verificaciones de estado en vivo para la accesibilidad, el SEO, las prácticas recomendadas y la navegación con agentes.

Parada de optimización del rendimiento

Realiza un recorrido por el panel Rendimiento actualizado, que te muestra cómo medir las Métricas web esenciales (LCP, CLS, INP) y cómo obtener asesoramiento personalizado de Gemini.

Pixel Pirate

Zarpa con las Herramientas para desarrolladores y conviértete en un pirata de la depuración. Descubre técnicas para emular estilos de enfoque, probar formularios con autocompletado y resolver errores de backend con anulaciones de red.

Obtén estadísticas de rendimiento

Una amplia variedad de herramientas para ayudarte a medir y optimizar diferentes aspectos del rendimiento del tiempo de ejecución: el panel Rendimiento, Lighthouse y mucho más.

Noticias y actualizaciones

Cómo inspeccionar y editar recursos

Referencia de la función

Obtén información sobre todas las funciones del panel Fuentes: cómo ver y editar archivos, depurar JavaScript y configurar un lugar de trabajo.

Configura un lugar de trabajo

Workspace te permite guardar los cambios que realices en DevTools en el código fuente que se almacena en tu computadora. Aprende a configurar un lugar de trabajo en tus propios proyectos.

Cómo analizar la actividad de red

Panel de red

Obtén información sobre todas las funciones del panel de red: inspecciona los cuerpos de respuesta y solicitud, reemplaza encabezados y mucho más.

Descubre todas las demás funciones y capacidades de DevTools.

Read the original on developer.chrome.com ↗