Fazendo solicitações HTTP usando as ferramentas de desenvolvedor do Chrome


206

Existe uma maneira de fazer uma solicitação HTTP usando as ferramentas de desenvolvedor do Chrome sem usar um plug-in como o POSTER?


1
Você espera fazer solicitações entre domínios ou no mesmo domínio em que você abriu as ferramentas do desenvolvedor?
Lukas

6
Para todas as pessoas que querem esse recurso - estrelar esta questão Cromo: code.google.com/p/chromium/issues/...
Ivan Zuzak

1
Todas foram respostas úteis, só queria adicionar uma ferramenta que considero bastante útil Advanced Rest Client . Usar isso pode ajudar a economizar muito tempo a longo prazo, se for necessário fazer várias solicitações de API.
Sagar Ranglani 18/10

6
O Firefox é uma opção melhor para isso. basta clicar com o botão direito do mouse na solicitação e reenviar ou editar e reenviar.
eusoubrasileiro

@eusoubrasileiro: Obrigado. O botão Editar e reenviar na guia de rede do Firefox para reenviar uma solicitação é um recurso muito bom. Espero que alguém levanta um pedido para adicioná-lo em cromo bem
firstpostcommenter

Respostas:


187

Como a API Fetch é suportada pelo Chrome (e pela maioria dos outros navegadores), agora é muito fácil fazer solicitações HTTP no console do devtools.

Para OBTER um arquivo JSON, por exemplo:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(console.log)

Ou para POSTAR um novo recurso:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
.then(res => res.json())
.then(console.log)

Os Devtools do Chrome também oferecem suporte à nova sintaxe assíncrona / aguardada (embora a espera normalmente só possa ser usada em uma função assíncrona):

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())

Observe que suas solicitações estarão sujeitas à mesma política de origem , como qualquer outra solicitação HTTP no navegador, para evitar solicitações de origem cruzada ou verifique se o servidor define cabeçalhos CORS que permitem sua solicitação.

Usando um plugin (resposta antiga)

Como complemento às sugestões postadas anteriormente, achei o plug-in Postman para o Chrome funcionando muito bem. Permite definir cabeçalhos e parâmetros de URL, usar autenticação HTTP, salvar solicitações que você executa com frequência e assim por diante.


3
Como o op aceitou uma resposta usando o Postman: Se você clicar com o botão direito do mouse na solicitação nas ferramentas de desenvolvimento e em "Copiar como cURL", poderá importar o comando cURL no Postman para reenviar / alterar a solicitação. Veja: getpostman.com/docs/postman/collections/data_formats -> "Importando como cURL"
dhfsk

1
Como fazer uma solicitação de postagem?
Nuhman

7
@Nuhman Fetch leva um segundo argumento, onde você pode configurar a pedidofetch("/echo/json/", { method: "POST", body: data })
Christofer Eliasson

1
Observe também que é possível copiar como buscar qualquer solicitação do histórico de rede das Ferramentas de Desenvolvimento do Chrome.
Vadzim

1
@mathtick Há uma modeopção pedido, pode usar: fetch("/echo/json/", { method: 'POST', mode: 'no-cors' }. Observe que o modo: "no-cors" permite apenas um conjunto limitado de cabeçalhos na solicitação. Mais informações sobre o uso de busca e não-cors
Christofer Eliasson

154

Se você deseja editar e reemitir uma solicitação capturada na guia Rede das Ferramentas para Desenvolvedor do Chrome:

  • Clique com o botão direito do mouse Namena solicitação
  • Selecione Copy > Copy as cURL
  • Cole na linha de comando (o comando inclui cookies e cabeçalhos)
  • Edite a solicitação conforme necessário e execute

insira a descrição da imagem aqui


11
Firefox permite editar a chamada antes de replay, mas não há tal opção em cromo, tão acima resposta é o caminho a percorrer
Tofeeq

3
Com o chrome 63+, colar CURL no console não está funcionando.
Ravi Parekh

2
@RaviParekh Eu não acho que ele quis dizer consola Chrome, ele quis dizer na linha de comando OS
Korayem

4
Copiar como busca permite reemitir solicitações alteradas diretamente do console do Chrome Dev Tools e é uma alternativa viável para quem não tem cURL ou deseja se preocupar com isso.
Vadzim

1
Mas, usando curl, às vezes o resultado não é o mesmo. Eu vim aqui para saber se eu poderia solicitar do navegador. Usando o javascript do navegador. Ele me permite reproduzir problemas de CORS, que ondulação do meu terminal não deve me esclarecer.
Garry Dias

32

Eu sei, post antigo ... mas pode ser útil deixar isso aqui.

Navegadores modernos agora oferecem suporte à API de busca .

Você pode usá-lo assim:

fetch("<url>")
    .then(data => data.json()) // could be .text() or .blob() depending on the data you are expecting
    .then(console.log); // print your data

ps: Ele fará todas as verificações do CORS, pois é uma melhoria XmlHttpRequest.


13

Se sua página da web possui jquery, você pode escrever no console do desenvolvedor do Chrome:

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);

Sua maneira jquery de fazê-lo!


14
Isso pressupõe a página web vai usar jQuery
mikemaccana

2
Recordar que este é apenas para GETos pedidos, se você quer fazer outros tipos de solicitações, você pode querer fazer uso de$.ajax
aksu

@mikemaccana Você pode carregar o jQuery em qualquer página via console.
Nehem

1
Assimvar script = document.createElement("script"); script.src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"; document.body.appendChild(script);
nehem

1
A resposta @itsneo estava certa! Maneira de carregar o jquery se a página que está sendo acessada ainda não a tiver. Então você pode usar $ .ajax ou equivalente, sem necessidade de um plugin
Renato Chencinski

12

Expandindo na resposta @dhfsk

Aqui está o meu fluxo de trabalho

  1. No Chrome DevTools, clique com o botão direito do mouse na solicitação que você deseja manipular> Copy as cURL Cópia do DevTools do Chrome como cURL

  2. Open Postman

  3. Clique Importno canto superior esquerdo ePaste Raw Text Carteiro colar cURL de texto bruto do Chrome

7

Se você deseja fazer um POST do mesmo domínio, sempre pode inserir um formulário no DOM usando as ferramentas Developer e enviá-lo:

Formulário inserido no documento


4

Tive a melhor sorte ao combinar duas das respostas acima. Navegue até o site no Chrome e encontre a solicitação na guia Rede do DevTools. Clique com o botão direito do mouse na solicitação e em Copiar, mas Copie como buscar em vez de cURL. Você pode colar o código de busca diretamente no console do DevTools e editá-lo, em vez de usar a linha de comando.


3
Não encaminhá-los como 'duas respostas acima' porque isso pode mudar quando upvoting / downvoting
Urosh T.

4

Para obter solicitações com cabeçalhos, use este formato.

   fetch('http://example.com', {
      method: 'GET',
      headers: new Headers({
               'Content-Type': 'application/json',
               'someheader': 'headervalue'
               })
    })
    .then(res => res.json())
    .then(console.log)

2

se você usa o jquery no seu site, pode usar algo assim no seu console

$.post(
    'dom/data-home.php',
    {
    type : "home", id : "0"
    },function(data){
        console.log(data)
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


1

Para simplificar, se você deseja que a solicitação use o mesmo contexto de navegação da página que você já está visualizando, basta fazer o seguinte no console do Chrome:

window.location="https://www.example.com";

1

$.post(
    'dom/data-home.php',
    {
    type : "home", id : "0"
    },function(data){
        console.log(data)
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


1
Você deve explicar sua resposta, não apenas postar algum código aleatório.
Jakub Muda
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.