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

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

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.

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

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.

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!

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

2. Open Postman

3. Clique Importno canto superior esquerdo ePaste Raw Text

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:

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.

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)

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>

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";