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.
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.
Obtén asistencia de IA
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.
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.
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.
Comenzar
Permite que Gemini te ayude a analizar y mejorar el diseño, la red, las fuentes y el rendimiento de tu sitio web.
Inspírate
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 de la consola
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.
Cómo grabar y analizar un registro de rendimiento
Aprende a grabar un registro de rendimiento en DevTools y analizarlo para identificar y corregir problemas de rendimiento.
Cómo supervisar las Métricas web esenciales en vivo
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.
Almacenamiento en caché desmitificado
Descubre los diferentes tipos de caché del navegador y cómo inspeccionarlos y administrarlos en las Herramientas para desarrolladores de Chrome.
Inmoviliza la pantalla y examina los elementos que desaparecen
¿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.
Descripción general de la herramienta de rendimiento
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 futuro de las herramientas de rendimiento
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.
Cómo anotar seguimientos de rendimiento
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 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.
Cómo inspeccionar la actividad de red
Un instructivo práctico para guiarte en las tareas comunes del panel Red.
Más herramientas
Descubre todas las demás funciones y capacidades de DevTools.
Elementos
Obtén información para ver y cambiar el DOM de una página.
Estilos
Obtén información para ver y cambiar el CSS de una página.
Cambios
Realiza un seguimiento de los cambios en HTML, CSS y JavaScript.
Consola
Registra mensajes y ejecuta JavaScript.
Rendimiento
Evaluar el rendimiento del sitio web
Memoria
Encuentra problemas de memoria que afectan el rendimiento de la página, como fugas de memoria y mucho más.
Aplicación
Inspecciona, modifica y depura apps web, prueba la caché, visualiza el almacenamiento y mucho más.
Animaciones
Inspeccionar y modificar animaciones
Grabadora
Graba, vuelve a reproducir, mide los flujos de usuarios y edita sus pasos.
Renderización
Descubre una colección de opciones que afectan el procesamiento del contenido web.
Autocompletar
Inspeccionar y depurar direcciones guardadas
Problemas
Detectar y solucionar problemas en tu sitio web
Privacidad y seguridad
Asegúrate de que una página esté completamente protegida por HTTPS.
Contenido multimedia
Consulta la información y depura los reproductores multimedia por pestaña del navegador.
Sensores
Emular los sensores del dispositivo
WebAuthn
Emula autenticadores.