<aside> 💡

Guía Práctica Completa y Detallada: Depuración y Análisis de Páginas Web con DevTools de Google Chrome

</aside>

Contenido

1. Acceder a DevTools

Métodos de Acceso

• Clic Derecho y Selección:
  • Haz clic derecho en la página y selecciona "Inspeccionar".
• Atajos de Teclado:
  • Windows/Linux: Ctrl + Shift + I
  • macOS: Cmd + Option + I
• Menú del Navegador:
  • Abre el menú de Chrome (los tres puntos en la esquina superior derecha), ve a "Más herramientas" > "Herramientas para desarrolladores".

Tipos de Vista de DevTools

• Vista Acoplada: DevTools puede acoplarse al lado o en la parte inferior de la ventana del navegador.
• Vista Separada: Puedes abrir DevTools en una ventana separada para maximizar tu área de trabajo.

Tip Importante: Presiona Esc mientras estás en DevTools para abrir o cerrar la consola sin perder la vista actual, lo que permite depurar y modificar el código sin cambiar de paneles.

2. Paneles Principales de DevTools

Resumen de los Paneles y Sus Usos

• Elements: Inspección y manipulación del DOM y estilos CSS en tiempo real.
• Console: Ejecución de JavaScript, depuración de errores y pruebas interactivas.
• Sources: Depuración de JavaScript, gestión de breakpoints y análisis del flujo de ejecución.
• Network: Monitoreo de todas las solicitudes de red, análisis de tiempos de carga y errores de recursos.
• Performance: Análisis detallado de la carga de la página y rendimiento en tiempo de ejecución.