¿Cómo puedo depurar un HTTP POST en Chrome?

Me gustaría ver los datos HTTP POST que se enviaron en Chrome.

Los datos están en la memoria ahora, y tengo la capacidad de volver a enviar el formulario.

Sé que si vuelvo a enviar el servidor arrojará un error, ¿hay alguna forma de ver los datos que están en la memoria de Chrome?

1. Vaya a Herramientas para desarrolladores de Chrome (Menú de Chrome -> Más herramientas -> Herramientas para desarrolladores)
2. Elija la pestaña "Red"
3. Actualiza la página en la que estás
4. Obtendrá una lista de consultas http que ocurrieron mientras la consola de red estaba encendida. Seleccione uno de ellos a la izquierda
5. Elija la pestaña "Encabezados"

Voila!

Puede filtrar las solicitudes HTTP POST con Chrome DevTools . Solo haz lo siguiente:

1. Abra Chrome DevTools ( Cmd+ Opt+ Ien Mac, Ctrl+ Shift+ Io F12en Windows) y haga clic en la pestaña "Red"
2. Haga clic en el icono "Filtro"
3. Ingrese su método de filtro: method:POST
4. Seleccione la solicitud que desea depurar
5. Ver los detalles de la solicitud que desea depurar

Captura de pantalla

Probado con Chrome versión 53.

Puede usar la versión canaria de Chrome para ver la carga útil de solicitudes POST.

Otra opción que puede ser útil es una herramienta de depuración HTTP dedicada. Hay algunos disponibles, sugeriría HTTP Toolkit : un proyecto de código abierto en el que he estado trabajando (sí, podría estar sesgado) para resolver este mismo problema por mí mismo.

La principal diferencia es la usabilidad y el poder. Las herramientas de desarrollo de Chrome son buenas para cosas simples, y recomendaría comenzar allí, pero si tiene dificultades para comprender la información allí, y necesita más explicaciones o más potencia, ¡las herramientas enfocadas adecuadas pueden ser útiles!

Para este caso, le mostrará el cuerpo POST completo que está buscando, con un editor amigable y resaltado (todo con tecnología VS Code ) para que pueda explorar. Le proporcionará los encabezados de solicitud y respuesta, por supuesto, pero con información adicional como documentos de MDN (la red de desarrolladores de Mozilla ) para cada encabezado estándar y código de estado que pueda ver.

Una imagen vale más que mil respuestas de StackOverflow:

Las otras personas respondieron muy bien, pero me gustaría completar su trabajo con una herramienta de desarrollo adicional. Se llama Live HTTP Headers y puede instalarlo en su Firefox , y en Chrome tenemos el mismo complemento como este .

Trabajar con él es muy fácil.

1. Usando su Firefox, navegue al sitio web en el que desea obtener su solicitud de publicación.

2. En su menú de Firefox Herramientas-> Live Http Headers

3. Aparecerá una nueva ventana emergente para usted y todos los detalles del método http se guardarán en esta ventana. No necesita hacer nada en este paso.

4. En el sitio web, realice una actividad (inicie sesión, envíe un formulario, etc.)

5. Mira tu ventana de enchufe. Está todo grabado.

Solo recuerde que debe verificar la captura .

Tiene una situación difícil: si envía un formulario de publicación, Chrome abrirá una nueva pestaña para enviar la solicitud. Es correcto hasta ahora, pero si activa un evento para descargar archivos , esta pestaña se cerrará inmediatamente para que no pueda capturar esta solicitud en la Herramienta de desarrollo.

Solución: antes de enviar el formulario de publicación, debe cortar su red , lo que hace que la solicitud no se pueda enviar correctamente para que la pestaña no se cierre. Y luego puede capturar el mensaje de solicitud en Chrome Devtool (Actualizar la nueva pestaña si es necesario)