Editar e reproduzir XHR chrome / firefox etc?

143

Estive procurando uma maneira de alterar uma solicitação XHR feita no meu navegador e reproduzi-la novamente. Digamos que eu tenha feito uma solicitação POST completa no meu navegador e a única coisa que quero alterar é um valor pequeno e, em seguida, reproduzi-lo novamente. Isso seria muito mais fácil e rápido de fazer diretamente no navegador.

Pesquisei um pouco no Google e não encontrei uma maneira de fazer isso no Chrome ou Firefox. Existe alguma maneira de fazer isso em um desses navegadores ou talvez em outro?

madsobel
fonte
Se você chegar aqui depois de perceber que "Replay XHR" não funciona no Chrome, observe que, nos casos com OPTIONSsolicitações de preflight ( ), você precisa clicar em 'replay' na solicitação de comprovação - não na solicitação final real.
Janaka Bandara

Respostas:

180

Cromada :

  • No painel Rede de devtools, clique com o botão direito do mouse e selecione Copiar como cURL
  • Cole / edite a solicitação e envie-a de um terminal, supondo que você tenha o curlcomando

Veja captura:

insira a descrição da imagem aqui

Como alternativa, e caso você precise enviar a solicitação no contexto de uma página da web , selecione "Copiar como busca" e edite-envie o conteúdo no painel do console javascript.


Raposa de fogo :

O Firefox permite editar e reenviar o XHR diretamente do painel Rede. A captura abaixo é do Firefox 36:

insira a descrição da imagem aqui

Michael P. Bazos
fonte
Isso pode realmente ser o que estou procurando. Eu sabia que podia copiar a chamada cURL, mas não podia executá-la diretamente do meu terminal, pois seria autenticado. Mas com o terminal construído diretamente em Chorme, eu suponho que a chamada seja feita "dentro" do navegador. Nesse caso, isso deve selar o acordo.
madsobel
14
Eu adicionei informações sobre o Firefox na resposta
Michael P. Bazos 2/15/15
Truque pequeno: se você quiser ver a saída cURL no navegador, execute-a na CLI como esta curl ... > preview.htmle abra o arquivo no navegador.
Afilia
@afilina para automatizar ainda mais este processo, você pode adicionar && open preview.htmlno MacOS eo arquivo abre diretamente após o pedido
CodeBrauer
2
Nesse caso, o Firefox está fazendo um trabalho muito melhor de longe!
jpenna
41

O Chrome agora tem Copiar como busca na versão 67:

Copiar como busca

Clique com o botão direito do mouse em uma solicitação de rede e selecione Copiar> Copiar como Buscar para copiar o fetch()código equivalente dessa solicitação para a área de transferência.

https://developers.google.com/web/updates/2018/04/devtools#fetch

Saída de amostra:

fetch("https://stackoverflow.com/posts/validate-body", {
  credentials: "include",
  headers: {},
  referrer: "https://stackoverflow.com/",
  referrerPolicy: "origin",
  body:
    "body=Chrome+now+has+_Copy+as+fetch_+in+version+67%3A%0A%0A%3E+Copy+as+fetch%0ARight-click+a+network+request+then+select+**Copy+%3E+Copy+As+Fetch**+to+copy+the+%60fetch()%60-equivalent+code+for+that+request+to+your+clipboard.%0A%0A&oldBody=&isQuestion=false",
  method: "POST",
  mode: "cors"
});

A diferença é que Copiar como cURL também incluirá todos os cabeçalhos da solicitação (como Cookie e Aceitar) e é adequado para reproduzir a solicitação fora do Chrome. O fetch()código é adequado para reprodução dentro do mesmo navegador.

Josh Lee
fonte
6
Obrigado por isso. Para quem quiser saber, basta colar o fetchcomando diretamente no console do Chrome e reproduzir novamente a solicitação.
Eric Kigathi 23/03/19
7
Você pode usar o seguinte após a buscar resolver a promessa retornado por buscar e visualizar o corpo da resposta (assumindo que é JSON).then(r => r.json()).then(json => console.log(json))
compatível com POSIX
1
@ Josh Lee, acho que as dicas em conformidade com o POSIX foram boas e podem ser adicionadas a esta resposta.
Nabi KAZ
@ Boas dicas compatíveis com POSIX, Existe um comando mais pequeno que possa ser lembrado ?!
Nabi KAZ
Para aqueles que se perguntam onde colar o código de busca: cole e modifique-o no console
dotista2008 09/07
20

Minhas duas sugestões:

  1. Plugman Postman do Chrome + Plugin Interceptor Postman . Mais informações: Postman Captura Pedidos Docs

  2. Se você estiver no Windows, o Fiddler da Telerik é uma opção. Possui uma opção de compositor para reproduzir solicitações HTTP e é gratuito.

zszep
fonte
8
Desde que comecei a usar o Postman + a extensão do Chrome Interceptor, não precisei mais do Fiddler.
Threaddez
3
FYI aplicativo Postman para o Chrome é agora obsoleto e essa configuração na versão standalone é um difícil pouco mais
yefrem
muito obrigado pelo que eu estava procurando!
Mohammad
15

Atualizando / completando a resposta zszep :

Após copiar a solicitação como cUrl (bash), basta importá-la no Postman App :

insira a descrição da imagem aqui

jgpATs2w
fonte
4

Para o Firefox, o problema se resolveu. Possui o recurso "Editar e reenviar" implementado.

Para extensão Chrome Tamper parece fazer o truque.

Jari Turkia
fonte
O que não é mais atualizado e tem críticas bastante ruins. A melhor alternativa é usar o Firefox para esse tipo de trabalho.
T3rm1
Sim. A situação para reenviar parece mudar bastante rapidamente. Agora, o Chrome reenvia solicitações XHR, mas não permite a edição.
Jari Turkia
cuidado com o Firefox ver.76 que parece ter problemas com o token CSRF nos cookies ao editar e reenviar. Tentei com a versão 37 que funcionou bem, mas com a versão76 há um problema de validação de token CSRF.
puppyceceyoyo
1

Cinco anos se passaram e esse requisito essencial não foi ignorado pelos desenvolvedores do Chrome.
Embora eles não ofereçam método para editar os dados como no Firefox, eles oferecem uma reprodução completa do XHR.
Isso permite depurar chamadas ajax. "Replay XHR" repetirá toda a transmissão.
insira a descrição da imagem aqui

John
fonte
0

Existem algumas maneiras de fazer isso, como mencionado acima, mas, na minha experiência, a melhor maneira de manipular uma solicitação XHR e reenviar é usar as ferramentas chrome dev para copiar a solicitação como solicitação cURL (clique com o botão direito do mouse na solicitação na guia rede) ) e simplesmente importar para o aplicativo Postman (botão gigante de importação no canto superior esquerdo).

quinlo
fonte
0

Não é necessário instalar extensões de terceiros!

Existe o snippet javascript , que você pode adicionar como marcador do navegador e ativar em qualquer site para rastrear e modificar as solicitações. Parece que:

insira a descrição da imagem aqui

Para obter mais instruções, consulte a página do github.

T.Todua
fonte