10. Diagnóstico Web y Herramientas de Desarrollador
Uso Avanzado de la Pestaña Network (DevTools)
Al presionar F12 o clic derecho → **Inspeccionar** en cualquier navegador, la pestaña **Network (Red)** te permite ver en tiempo real cada petición que realiza la página:
- Name & Path: Recurso solicitado (HTML, CSS, API endpoint).
- Status: Código de respuesta devuelto por el servidor (200, 304, 404, 500).
- Type & Initiator: Tipo de contenido e hilo o script que inició la llamada.
- Size & Time: Peso descargado y tiempo de latencia de red.
Inspección de Encabezados (Headers) y Cookies
Al seleccionar una petición en DevTools, la pestaña **Headers** revela información técnica fundamental:
headers_inspeccion.txt
HTTP
1# Request Headers (Enviados por cliente)
2Host: proyecto.cl
3User-Agent: Mozilla/5.0
4Authorization: Bearer token_jwt_123
5
6# Response Headers (Retornados por servidor)
7HTTP/1.1 200 OK
8Content-Type: application/json
9Strict-Transport-Security: max-age=31536000; includeSubDomains
10Server: nginx/1.18.0
Comandos de Consola para Diagnóstico de Red
comandos_diagnostico.sh
BASH
1# Inspeccionar únicamente los encabezados HTTP retornado por un servidor
2curl -I https://proyecto.cl
3
4# Medir latencia de red y verificar que el servidor responda
5ping proyecto.cl
6
7# Diagnosticar puertos abiertos en el servidor
8nc -zv IP_SERVIDO 80 443 22
Ponte a prueba
Demuestra tu destreza en el diagnóstico y monitoreo de sitios web.
