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


196

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?


Hay un buen ejemplo de video-giff sobre cómo llegar a la pestaña de red aquí: wpza.net/using-google-chrome-to-capture-post-data-in-wordpress
WPZA

Respuestas:


232
  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!

ingrese la descripción de la imagen aquí


74
Esto es OBTENER, NO
PUBLICAR

77
Captura solicitudes GET y POST, @QkiZ
almulo

48
Nota: para ver una solicitud de publicación que vuelve a cargar su página, debe marcar "Conservar registro".
Bryce Guinta

39
Me falta el cuerpo de solicitud aquí? :-(
Timo

3
En Chrome 71, el cuerpo (es decir, datos POST-ed) aparece en la parte inferior de la pestaña Encabezados debajo del encabezado "Solicitar carga útil".
MSC

138

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

Chrome DevTools

Probado con Chrome versión 53.


1
Trabajó en Chrome 70. Filtrar usando method:POSTes muy útil
user1071847


5

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:

Una captura de pantalla de HTTP Toolkit que muestra una solicitud POST y su cuerpo


1
Parece muy prometedor, pero hay algunos problemas en mi máquina, los publiqué en GitHub.
userlond

0

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 .

ingrese la descripción de la imagen aquí


0

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)

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.