Como depurar um POST HTTP no Chrome?

196

Gostaria de visualizar os dados HTTP POST enviados no Chrome.

Os dados estão na memória agora e tenho a capacidade de reenviar o formulário.

Sei que se reenviar, o servidor lançará um erro. Existe alguma maneira de visualizar os dados que estão na memória do Chrome?

goodguys_activate
fonte
Há um bom exemplo de vídeo-giff sobre como ge para a guia rede aqui: wpza.net/using-google-chrome-to-capture-post-data-in-wordpress
WPZA

Respostas:

232
  1. Vá para Ferramentas do desenvolvedor do Chrome (Menu Chrome -> Mais ferramentas -> Ferramentas do desenvolvedor)
  2. Escolha a guia "Rede"
  3. Atualize a página em que você está
  4. Você obterá uma lista de consultas http que aconteceram enquanto o console de rede estava ligado. Selecione um deles à esquerda
  5. Escolha a aba "Cabeçalhos"

Voila!

insira a descrição da imagem aqui

mrówa
fonte
74
Esta é GET, não POST
QkiZ
7
Ele capta tanto solicitações GET e POST, @QkiZ
almulo
48
Nota: Para realmente ver uma solicitação de postagem que recarrega sua página, é necessário marcar "Preservar log".
Bryce Guinta
39
Estou faltando o corpo da solicitação aqui? :-(
Timo
3
No Chrome 71, o corpo (ou seja, dados POST-ed) aparece na parte inferior da guia Cabeçalhos, sob o título "Solicitar carga útil".
MSC
138

Você pode filtrar solicitações HTTP POST com o Chrome DevTools . Faça o seguinte:

  1. Abra o Chrome DevTools ( Cmd+ Opt+ Ino Mac, Ctrl+ Shift+ Iou F12no Windows) e clique na guia "Rede"
  2. Clique no ícone "Filtro"
  3. Digite seu método de filtro: method:POST
  4. Selecione a solicitação que você deseja depurar
  5. Veja os detalhes da solicitação que você deseja depurar

Captura de tela

Chrome DevTools

Testado com o Chrome versão 53.

Benny Neugebauer
fonte
1
Trabalhou no Chrome 70. A filtragem usando method:POSTé muito útil
user1071847 16/11
5

Outra opção que pode ser útil é uma ferramenta de depuração HTTP dedicada. Há alguns disponíveis, eu sugiro o HTTP Toolkit : um projeto de código aberto no qual estou trabalhando (sim, posso ser tendencioso) para resolver esse mesmo problema.

A principal diferença é usabilidade e poder. As ferramentas de desenvolvimento do Chrome são boas para coisas simples, e eu recomendo começar por aí, mas se você estiver com dificuldades para entender as informações existentes e precisar de mais explicações ou mais poder, as ferramentas focadas apropriadas podem ser úteis!

Nesse caso, ele mostrará o corpo completo do POST que você está procurando, com um editor amigável e destaque (todos equipados com o VS Code ) para que você possa se divertir. É claro que ele fornecerá os cabeçalhos de solicitação e resposta, mas com informações extras, como documentos da MDN ( Mozilla Developer Network ), para todos os cabeçalhos e códigos de status padrão que você puder ver.

Uma imagem vale mais que mil respostas StackOverflow:

Uma captura de tela do HTTP Toolkit mostrando uma solicitação POST e seu corpo

Tim Perry
fonte
1
Parece muito promissor, mas há alguns problemas na minha máquina, postados no GitHub.
precisa saber é o seguinte
0

As outras pessoas responderam muito bem, mas eu gostaria de concluir o trabalho com uma ferramenta de desenvolvimento extra. Chama-se Live HTTP Headers e você pode instalá-lo no Firefox e, no Chrome , temos o mesmo plug-in como este .

Trabalhar com isso é fácil.

  1. Usando o Firefox, navegue até o site em que deseja obter sua solicitação de postagem.

  2. No seu menu Firefox Ferramentas-> Live Http Headers

  3. Uma nova janela será exibida para você e todos os detalhes do método http serão salvos nessa janela para você. Você não precisa fazer nada nesta etapa.

  4. No site, faça uma atividade (faça login, envie um formulário etc.)

  5. Olhe para a sua janela de plug-in. Está tudo gravado.

Lembre-se de que você precisa verificar o Capture .

insira a descrição da imagem aqui

Jimmy
fonte
0

A situação é complicada: se você enviar um formulário de postagem, o Chrome abrirá uma nova guia para enviar a solicitação. Está certo até agora, mas se ele acionar um evento para fazer o download de arquivos , essa guia será fechada imediatamente para que você não possa capturar essa solicitação na Ferramenta de Desenvolvimento.

Solução: antes de enviar o formulário de postagem, você precisa cortar sua rede , o que faz com que a solicitação não possa ser enviada com sucesso para que a guia não seja fechada. E então você pode capturar a mensagem de solicitação no Chrome Devtool (Atualizando a nova guia, se necessário)

Dcalsky
fonte