Inspección de peticiones HTTP en herramientas de desarrollo

Comprende y depura peticiones HTTP directamente en el navegador con total claridad. Usando la fake store API de Platzi, verás cómo leer la URL, el status code, los headers y el content type desde Network en Chrome y Firefox, cómo previsualizar respuestas y cómo probar comportamientos reales con caché, filtros y throttling.

¿Cómo analizar una petición HTTP en el navegador?

Abrir el inspector y entrar a Network permite ver la primera solicitud al cargar un sitio, junto con todas las subsecuentes. Esa primera respuesta define estructura, imágenes, estilos y scripts que el navegador descargará después.

¿Qué muestra el primer request en network?

• URL solicitada: https://fakeapi.platzi.com.
• Método GET en HTTP.
• Status code 304: no ha cambiado desde la última visita.
• Es la respuesta principal; las demás son subsecuentes que se disparan a partir de esta.

¿Cómo se ven imágenes y su content type?

• Abrir la URL de una imagen y filtrar por “imagen”.
• Status code 200 cuando no se había visitado antes.
• Header Accept cambia: ahora acepta tipos de imagen (WebP, APNG, SVG, etc.).
• La previsualización muestra bytes del archivo; el navegador interpreta según content type.
• Ejemplo de content type: image JPEG.
• Content length: tamaño (peso) de la imagen.

¿Qué revelan los headers y el status code en dev tools?

Los response headers incluyen cache-control (política de caché), date del servidor y un header personalizado con prefijo X-. Los request headers muestran Accept, que indica el tipo de contenido esperado (por ejemplo, text/html si se pide una página, no un JSON).

¿Cómo usar edit and resend para negociar contenido?

• En Firefox, abrir una respuesta de API que el navegador interpreta como JSON.
• Ver Request Headers y notar que Accept no especifica application JSON.
• Usar clic derecho, Edit and Resend, y cambiar Accept a application JSON.
• Enviar y recibir 200; el visor mapea la respuesta a JSON.
• En Response Headers, el Content-Type coincide con lo pedido en Accept.
• Es negociación de contenido usando el protocolo: indicas “yo espero application/json” y el servidor responde en ese formato.

¿Por qué un 404 ayuda a aprender?

• Probar una URL inexistente (por ejemplo, añadir “platzi”).
• Recibir status code 404.
• El panel explica “not found” con documentación de Mozilla.
• Permite entender rápido el error y su significado oficial.

¿Cómo medir tiempos, filtrar tráfico y controlar caché?

Las herramientas muestran el desempeño de la red y permiten reproducir condiciones reales. Así validas tiempos, evitas falsos positivos por caché y observas qué recursos se están descargando.

¿Qué tiempos de respuesta observar?

• Línea de tiempo desde que inicia la solicitud hasta que llega la información.
• Espera aproximada de 76 ms para la petición.
• Espera aproximada de 128 ms para la respuesta.

¿Cómo filtrar por tipo de recurso en network?

• Ver todo o filtrar por HTML, CSS o JavaScript.
• XHR para solicitudes hechas desde la página al cliente.
• Fuentes, imágenes y otros medios.
• WebSockets para comunicación en tiempo real.

¿Cómo deshabilitar caché y simular red lenta?

• Deshabilitar caché para evitar 304 y forzar 200 con contenido fresco.
• Usar throttling para limitar el ancho de banda.
• Modo offline para simular sin conexión.
• Red lenta para observar demoras y comportamientos.

Cuéntame en los comentarios: ¿qué navegador usas y qué dev tools te funcionan mejor para tu caso de uso?.