Las Herramientas para desarrolladores de Chrome son un conjunto de herramientas para desarrolladores web que están integradas directamente en el navegador Google Chrome. Las Herramientas para desarrolladores pueden ayudarte a editar páginas sobre la marcha y diagnosticar problemas rápidamente, lo que te ayuda a crear mejores sitios web, más rápido.
Cómo comenzar
Todas las formas en las que puedes abrir las Herramientas para desarrolladores de Chrome.
Mantente actualizado con los cambios más recientes de Herramientas para desarrolladores.
Serie de videos breves que te ayudarán a conocer las funciones en Herramientas para desarrolladores.

Comandos y accesos directos

Realiza tareas rápidamente.
Una guía sobre cómo abrir el menú de comandos, ejecutar comandos, abrir archivos, ver otras acciones y mucho más.
Leer el documento
Documentación canónica de las combinaciones de teclas de las Herramientas para desarrolladores de Chrome.
Leer el documento
Consulta el aspecto y el comportamiento de una página web cuando JavaScript está inhabilitado.
Leer el documento
Usa dispositivos virtuales en el Modo de dispositivo de Chrome para crear sitios web que prioricen los dispositivos móviles.
Encuentra texto en todos los recursos cargados con la pestaña Buscar.

Paneles

Descubre la potencia de cada panel de Herramientas para desarrolladores.
Aprende a ver y cambiar el DOM de una página con las Herramientas para desarrolladores de Chrome.
Consulta los documentos
Aprende a ver y cambiar el CSS de una página con las Herramientas para desarrolladores de Chrome.
Consulta los documentos
Registra mensajes y ejecuta JavaScript.
Consulta los documentos
Visualiza y edita archivos, crea fragmentos, depura JavaScript y configura un lugar de trabajo.
Consulta los documentos
Registra las solicitudes de red.
Consulta los documentos
Evalúa el rendimiento del sitio con Herramientas para desarrolladores.
Consulta los documentos
Encuentra problemas de memoria que afecten el rendimiento de la página, como fugas o aumentos de memoria, y recolecciones frecuentes de elementos no utilizados.
Consulta los documentos
Inspecciona, modifica y depura apps web, prueba la caché y visualiza el almacenamiento.
Consulta los documentos
Graba, vuelve a reproducir, mide los flujos de usuarios y edita sus pasos.
Consulta los documentos
Descubre una colección de opciones que afectan el procesamiento del contenido web.
Consulta los documentos
Detectar y solucionar problemas en tu sitio web
Usa el panel Seguridad para asegurarte de que una página esté completamente protegida por HTTPS.
Inspecciona un ArrayBuffer, TypedArray o DataView en JavaScript, además de WebAssembly y la memoria de las apps de Wasm para C++.
Anula la string del usuario-agente. Inhabilita la opción Seleccionar automáticamente y elige una opción de la lista o ingresa una cadena personalizada.
Usa el panel Contenido multimedia para ver información y depurar los reproductores multimedia por pestaña del navegador.
Inspecciona y modifica animaciones con la pestaña Animaciones.
Realiza un seguimiento de los cambios en HTML, CSS y JavaScript.
Busca y analiza código JavaScript y CSS sin usar en las Herramientas para desarrolladores de Chrome.
Usa la pestaña del panel lateral de recursos para desarrolladores a fin de verificar si los mapas de origen se cargan correctamente y, luego, cargarlos de forma manual.
Identifica las posibles mejoras de CSS con el panel Resumen de CSS.
Optimiza la velocidad del sitio web con el panel de Lighthouse.
Obtén estadísticas prácticas sobre el rendimiento de tu sitio web con el panel Estadísticas de rendimiento.
Emular los sensores del dispositivo
Emula autenticadores.

Referencia de configuración