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.
Comenzar Notas de la versión

Depura con IA

Explora cómo las innovaciones basadas en IA en Herramientas para desarrolladores te permiten hacer más tareas con mayor rapidez. Usa el MCP de las Herramientas para desarrolladores de Chrome para conectar la potencia de las Herramientas para desarrolladores a tus agentes de programación favoritos.
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.
Explora las innovaciones en IA
Proporciona a tus agentes de codificación las mismas herramientas de confianza que usas para inspeccionar la actividad de la red, registrar seguimientos y solucionar problemas de aplicaciones web, todo dentro de tu flujo de trabajo de IA.

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

Más información en GitHub
Obtén una vista integral y práctica del rendimiento de tu página.
Aprende a inspeccionar los recursos que carga tu página y a editarlos desde el navegador.
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.
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.
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.
Explora el poder de la depuración asistida por IA con las Herramientas para desarrolladores de Chrome. Descubre cómo Console Insights, la asistencia de IA para el diseño, el rendimiento, la red y las fuentes pueden potenciar tu flujo de trabajo.
Explora técnicas avanzadas del panel Network, como cómo encontrar cuellos de botella de rendimiento, depurar ventanas emergentes, configurar condiciones de red, usar accesos directos para determinar los iniciadores de solicitudes de red y mucho más.

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.
Obtén información sobre todas las funciones del panel Rendimiento: cómo grabar un registro de rendimiento, cómo ver y analizar el registro, y mucho más.
Obtén información sobre las nuevas funciones de DevTools, como la calibración del estrangulamiento de la CPU, que te ayudarán a basar tus decisiones de depuración de rendimiento en datos del mundo real
Obtén información sobre las nuevas estadísticas de rendimiento y la potencia de Lighthouse directamente en el panel Rendimiento de DevTools.

Noticias y actualizaciones

Cómo inspeccionar y editar recursos

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.
Comenzar
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.
Leer el instructivo

Cómo analizar la actividad 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.
Comenzar
Un instructivo práctico para guiarte en las tareas comunes del panel Red.
Leer el instructivo

Más herramientas

Descubre todas las demás funciones y capacidades de DevTools.
Obtén información para ver y cambiar el DOM de una página.
Obtén información para ver y cambiar el CSS de una página.
Realiza un seguimiento de los cambios en HTML, CSS y JavaScript.
Registra mensajes y ejecuta JavaScript.
Evaluar el rendimiento del sitio web
Encuentra problemas de memoria que afectan el rendimiento de la página, como fugas de memoria y mucho más.
Inspecciona, modifica y depura apps web, prueba la caché, visualiza el almacenamiento y mucho más.
Inspeccionar y modificar animaciones
Graba, vuelve a reproducir, mide los flujos de usuarios y edita sus pasos.
Descubre una colección de opciones que afectan el procesamiento del contenido web.
Inspeccionar y depurar direcciones guardadas
Detectar y solucionar problemas en tu sitio web
Asegúrate de que una página esté completamente protegida por HTTPS.
Consulta la información y depura los reproductores multimedia por pestaña del navegador.
Emular los sensores del dispositivo
Emula autenticadores.