Como depurar um POST HTTP no Chrome?

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?

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!

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

Testado com o Chrome versão 53.

Você pode usar a versão Canary do Chrome para ver a carga útil das solicitações POST.

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:

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 .

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)