Fare richieste HTTP usando gli strumenti di sviluppo di Chrome

Esiste un modo per effettuare una richiesta HTTP utilizzando gli strumenti di sviluppo di Chrome senza utilizzare un plug-in come POSTER?

Poiché l' API Fetch è supportata da Chrome (e dalla maggior parte degli altri browser), ora è abbastanza semplice fare richieste HTTP dalla console devtools.

Per GET un file JSON, per esempio:

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

O POST una nuova risorsa:

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)

Chrome Devtools attualmente supporta anche la nuova sintassi asincrona / waitit (anche se waitit normalmente può essere utilizzato solo all'interno di una funzione asincrona):

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

Nota che le tue richieste saranno soggette alla stessa politica di origine , proprio come qualsiasi altra richiesta HTTP nel browser, quindi evita le richieste di origine incrociata o assicurati che il server imposti le intestazioni CORS che consentono la tua richiesta.

Usare un plugin (vecchia risposta)

In aggiunta ai suggerimenti precedentemente pubblicati, ho trovato che il plug-in Postman per Chrome funzionava molto bene. Ti consente di impostare intestazioni e parametri URL, utilizzare l'autenticazione HTTP, salvare le richieste che esegui frequentemente e così via.

Se desideri modificare e riemettere una richiesta che hai acquisito nella scheda Rete degli Strumenti di sviluppo di Chrome:

• Fare clic con il tasto destro del mouse Namesulla richiesta
• Selezionare Copy > Copy as cURL
• Incolla sulla riga di comando (il comando include cookie e intestazioni)
• Modifica la richiesta secondo necessità ed esegui

Lo so, vecchio post ... ma potrebbe essere utile lasciarlo qui.

I browser moderni ora supportano l' API Fetch .

Puoi usarlo in questo modo:

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: effettuerà tutti i controlli CORS, poiché è migliorato XmlHttpRequest.

Se la tua pagina web ha jquery nella tua pagina, puoi farlo scrivendo sulla console degli sviluppatori di Chrome:

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

Il suo modo jquery di farlo!

Espandendo sulla risposta @dhfsk

Ecco il mio flusso di lavoro

1. Da Chrome DevTools, fare clic con il tasto destro del mouse sulla richiesta che si desidera manipolare> Copy as cURL

2. Apri postino

3. ImportQuindi fare clic nell'angolo in alto a sinistraPaste Raw Text

Se vuoi fare un POST dallo stesso dominio, puoi sempre inserire un modulo nel DOM usando gli strumenti per sviluppatori e inviare che:

Ho avuto la migliore fortuna combinando due delle risposte sopra. Passare al sito in Chrome, quindi trovare la richiesta nella scheda Rete di DevTools. Fare clic con il tasto destro del mouse sulla richiesta e Copia, ma Copia come recupero anziché cURL. È possibile incollare il codice di recupero direttamente nella console DevTools e modificarlo, anziché utilizzare la riga di comando.

Per ottenere richieste con le intestazioni, utilizzare questo formato.

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

se usi jquery sul tuo sito web, puoi usare qualcosa di simile alla tua 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>

Semplificando, se desideri che la richiesta utilizzi lo stesso contesto di navigazione della pagina che stai già visualizzando, nella console di Chrome fai semplicemente:

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