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 Descubre las novedades
DevTools admite una amplia variedad de tareas comunes de desarrollo web. Continúa leyendo esta página y explora algunas de las funciones clave de DevTools. ¿No sabes por dónde empezar o es la primera vez que usas DevTools? Mira una introducción a Herramientas para desarrolladores.
Las estadísticas de Play Console y la asistencia de IA te ayudan a depurar y corregir errores, rendimiento y diseño de JavaScript de forma más eficiente.
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.

Asistencia de IA y estadísticas de la consola

Explora cómo las innovaciones de IA en DevTools te permiten hacer más tareas más rápido.
Permite que Gemini te ayude a analizar y mejorar el diseño, la red, las fuentes y el rendimiento de tu sitio web.
Explora los casos de uso de la asistencia de IA en Herramientas para desarrolladores de Chrome y descubre cómo puede respaldar tu flujo de trabajo de depuración en diseño, rendimiento y mucho más.
Comprende los mensajes y errores de la consola en DevTools y aprende a corregirlos sin copiar y pegar.

Sugerencias para Herramientas para desarrolladores

Explora nuestra serie de videos mensuales en la que se explica cómo usar DevTools para resolver problemas comunes de desarrollo web.
Aprende a grabar un registro de rendimiento en DevTools y analizarlo para identificar y corregir problemas de rendimiento.
Debuga los problemas de LCP y usa los datos de CrUX para ver si estás depurando una experiencia similar a la de tus usuarios.
Descubre los diferentes tipos de caché del navegador y cómo inspeccionarlos y administrarlos en las Herramientas para desarrolladores de Chrome.
¿Intentas inspeccionar un elemento y, de repente, desaparece? Es como si tu código estuviera jugando a las escondidas contigo.

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.
El panel Rendimiento ayuda a los desarrolladores a medir y optimizar el rendimiento del entorno de ejecución desde hace más de 15 años. Obtén información sobre cómo evolucionará en el futuro.
Anota los seguimientos en su lugar y guárdalos directamente en el archivo de seguimiento para compartirlos de forma sencilla.

Noticias y actualizaciones

Cómo realizar un análisis de red avanzado con las Herramientas para desarrolladores de Chrome

Updated 27 de febrero de 2025

Realiza un análisis de red avanzado con las Herramientas para desarrolladores de Chrome.

Cómo presentamos Gemini en las Herramientas para desarrolladores de Chrome

Updated 14 de enero de 2025

Descubre casos de uso divertidos y emocionantes del nuevo panel de asistencia de IA en Herramientas para desarrolladores

Cómo registrar y analizar un registro de rendimiento con DevTools

Updated 5 de diciembre de 2024

Graba y analiza un registro de rendimiento con DevTools.

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.