DevTools y Postman para probar APIs

Resumen

Probar APIs antes de automatizarlas es un paso que define si tu trabajo en backend va a funcionar o se va a romper en el primer intento. Aquí aprendes a usar las DevTools del navegador y Postman para inspeccionar peticiones, validar respuestas y enviar distintos verbos HTTP cuando el navegador se queda corto.

¿Qué son las DevTools y para qué sirve la pestaña Network?

Las DevTools son las herramientas de desarrollo integradas en el navegador. Las abres con clic derecho y luego en Inspeccionar. Dentro encuentras varias pestañas, pero para trabajar con APIs la más útil es Network.

Cuando abres Network por primera vez aparece vacía. Recarga la página y vas a ver toda la información que el navegador pidió al sitio: imágenes, JS, CSS y, lo que nos interesa, las llamadas a APIs. Para filtrar solo esas peticiones, haz clic en Fetch/XHR.

¿Qué muestra la pestaña Network? Muestra cada petición que hace el navegador al servidor: la URL llamada, el método HTTP, el status code, los headers, el payload enviado y la respuesta recibida.

¿Qué información puedes extraer de cada request?

Al hacer clic en una petición específica, puedes navegar entre varias secciones que te dan el panorama completo:

  • Headers: la API llamada, el método usado y el status code que indica si fue exitoso o no.
  • Payload: lo que tú enviaste, que a veces puede estar encriptado.
  • Preview y Response: la respuesta del servidor en formato legible o crudo.
  • Timing y Cookies: tiempos de la petición y qué cookies se enviaron.

Por ejemplo, si una página intenta autenticar un usuario y devuelve un status 200 pero el preview indica que no hay usuario, eso significa que la petición técnicamente funcionó, pero la lógica de negocio respondió que no estás logueado [03:00].

¿Por qué activar Preserve log al inspeccionar APIs?

Una recomendación clave: activa siempre la opción Preserve log. Si cambias de página o hay una redirección rápida, los registros que tenías se pierden. Con Preserve log activo, todo queda guardado y puedes analizar transiciones que ocurren en milisegundos [04:30].

Esto es especialmente útil cuando pruebas backend sin documentación. A veces te entregan el requerimiento listo con el payload exacto, pero otras veces tú tienes que descubrir qué API se está llamando, qué se manda y cómo se manda. Inspeccionar Network es la forma directa de averiguarlo.

¿Cuándo necesitas Postman en lugar del navegador?

El navegador funciona bien para peticiones tipo GET: pegas la URL, cargas y obtienes el JSON de respuesta. Hay extensiones que formatean el JSON para que se vea estructurado y legible.

El problema aparece cuando necesitas otros verbos HTTP. Un POST, PUT o PATCH no se pueden ejecutar de manera natural desde la barra de direcciones. Ahí entra Postman, una herramienta especializada para construir y enviar peticiones HTTP de cualquier tipo.

¿Qué es Postman y por qué se usa? Es una herramienta que te permite enviar peticiones HTTP con cualquier verbo (GET, POST, PUT, PATCH, DELETE), configurar headers, mandar cuerpos en distintos formatos y revisar la respuesta del servidor antes de automatizar.

¿Cómo enviar un POST con cuerpo JSON desde Postman?

El flujo en Postman es directo y te da control total sobre la petición:

  1. Selecciona el verbo HTTP que necesitas, por ejemplo POST.
  2. Pega la URL del endpoint que vas a probar.
  3. Ve a la sección Body y elige la opción raw.
  4. Define el tipo de contenido: JSON, XML, HTML o JavaScript.
  5. Escribe el cuerpo de la petición y presiona Send.

La respuesta aparece abajo y puedes verla en formato crudo, previsualización o como tabla si la estructura lo permite. También puedes inspeccionar los headers de respuesta, igual que en las DevTools [07:00].

¿Cómo combinar DevTools y Postman en tu flujo de pruebas?

La estrategia que mejor funciona es usar ambas herramientas según el caso. Si solo necesitas observar qué API llama una página y validar un GET, las DevTools son suficientes. Si necesitas reproducir un POST, modificar el payload o probar un PUT que no existe en la interfaz, Postman es el camino.

Esta validación previa es clave: antes de automatizar cualquier prueba con frameworks como Cypress, asegúrate de que las APIs respondan correctamente. Automatizar sobre una API rota solo multiplica los errores.

¿Has tenido que descubrir una API sin documentación inspeccionando Network? Cuéntame en los comentarios qué herramienta usas más en tu día a día.