Chrome DevTools

Chrome DevTools es un conjunto de herramientas de creación web y depuración integrado en Google Chrome. Usa DevTools para iterar y depurar tu sitio, y para crear un perfil de él.

Prueba interna: ¿Buscas lo último? Chrome Canary siempre tiene la versión más reciente de DevTools.

Abrir Chrome DevTools

• En el Menú de Chrome, selecciona More Tools > Developer Tools.
• Haz clic con el botón secundario en un elemento de la página y selecciona Inspect.
• Usa las combinaciones de teclas Ctrl+Mayúscula+I (Windows) o Cmd+Opción+I (Mac).

Descubrir los paneles

Device Mode

Usa Device Mode para desarrollar experiencias web con una completa capacidad de respuestas y que prioricen los dispositivos móviles.

• Device Mode
• Prueba ventanas de visualización adaptables y específicas para cada dispositivo
• Emula sensores: ubicación geográfica y acelerómetro

Elements

Usa el panel Elements para iterar la distribución y el diseño de tu sitio mediante la libre manipulación de DOM y CSS.

• Inspecciona y modifica ligeramente tus páginas
• Edita estilos
• Edita el DOM

Console

Usa el panel Console para registrar información de diagnóstico durante el desarrollo o úsalo como un shell para interactuar con el código JavaScript en la página.

• Cómo usar la consola
• Interactúa desde la línea de comandos

Sources

Depura tu código JavaScript con puntos de interrupción en el panel Sources o conecta los archivos locales mediante espacios de trabajo para usar el editor en tiempo real de DevTools.

• Depura con puntos de interrupción
• Depura código ofuscado
• Configura la persistencia con los espacios de trabajo de DevTools

Network

Usa el panel Network para obtener información sobre recursos solicitados y descargados, y optimizar el rendimiento de carga de tu página.

• Conceptos básicos del panel Network
• Comprensión de Resource Timing
• Limitación de la red

Timeline

Usa el panel Timeline para mejorar el rendimiento del tiempo de ejecución de la página mediante la grabación y la exploración de los diferentes eventos que ocurren durante el ciclo de vida de un sitio.

• Cómo ver el rendimiento
• Analiza el rendimiento del tiempo de ejecución
• Diagnostica diseños sincrónicos forzados

Profiles

Usa el panel Profiles si necesitas más información que la que proporciona el panel Timeline; por ejemplo, para rastrear pérdidas de memoria.

• Generador de perfiles de CPU en JavaScript
• Generador de perfiles de montón

Application

Usa el panel Resources para inspeccionar todos los recursos que se cargan; entre otros, bases de datos IndexedDB o Web SQL, almacenamiento local y de sesión, cookies, caché de la app, imágenes, fuentes y hojas de estilos.

• Administra datos

Security

Usa el panel Security para depurar problemas de contenido mixto, problemas de tu certificado y más.

• Seguridad

Participar

Twitter Stack Overflow Slack