Cómo usar las herramientas de desarrollador del navegador

Las herramientas de desarrollador son un conjunto de funciones integradas en los navegadores web que permiten inspeccionar, modificar y depurar el código de cualquier página web. Estas herramientas son esenciales para desarrolladores web, pero también útiles para usuarios que quieren entender cómo funcionan los sitios web.

1. Abre las herramientas de desarrollador. Presiona F12 en Windows/Linux o Cmd+Option+I en Mac. También puedes hacer clic derecho en cualquier elemento de la página y seleccionar 'Inspeccionar' o 'Inspeccionar elemento'. Las herramientas se abrirán en la parte inferior o lateral de la ventana del navegador.
2. Explora la pestaña Elements/Elementos. Esta pestaña muestra el código HTML de la página. Haz clic en cualquier elemento para seleccionarlo y ver sus propiedades CSS en el panel derecho. Puedes expandir o contraer las etiquetas HTML haciendo clic en los triángulos junto a ellas.
3. Modifica estilos CSS en tiempo real. En el panel de estilos, haz clic en cualquier valor CSS para editarlo. Los cambios se aplicarán inmediatamente en la página. Puedes agregar nuevas propiedades haciendo clic en el espacio vacío dentro de un selector CSS.
4. Utiliza la pestaña Console/Consola. Cambia a la pestaña Console para ver errores de JavaScript y mensajes del sistema. Puedes escribir comandos JavaScript directamente en la línea de comandos inferior y presionar Enter para ejecutarlos en el contexto de la página actual.
5. Inspecciona el tráfico de red. Abre la pestaña Network/Red y recarga la página para ver todas las solicitudes HTTP. Haz clic en cualquier solicitud para ver detalles como headers, tiempo de respuesta y contenido. Esta pestaña es útil para identificar recursos que tardan en cargar.
6. Simula dispositivos móviles. Haz clic en el ícono de dispositivo móvil (📱) en la barra superior o presiona Ctrl+Shift+M (Cmd+Shift+M en Mac). Esto activará el modo de vista responsiva donde puedes seleccionar diferentes tamaños de pantalla y simular cómo se ve el sitio en dispositivos móviles.
7. Guarda y exporta cambios. Para guardar modificaciones CSS, haz clic derecho en la hoja de estilos en la pestaña Sources/Fuentes y selecciona 'Save' o 'Guardar'. También puedes copiar elementos HTML modificados haciendo clic derecho en el código y seleccionando 'Copy' > 'Copy outerHTML'.