Faire des requêtes HTTP à l'aide des outils de développeur Chrome

Existe-t-il un moyen de faire une demande HTTP à l'aide des outils du développeur Chrome sans utiliser un plugin comme POSTER?

Étant donné que l' API Fetch est prise en charge par Chrome (et la plupart des autres navigateurs), il est désormais assez facile de faire des requêtes HTTP à partir de la console devtools.

Pour GET un fichier JSON par exemple:

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

Ou pour POSTER une nouvelle ressource:

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 prend également en charge la nouvelle syntaxe async / wait (même si attend normalement ne peut être utilisé que dans une fonction async):

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

Notez que vos demandes seront soumises à la même politique d'origine , comme toute autre demande HTTP dans le navigateur, donc évitez les demandes d'origine croisée ou assurez-vous que le serveur définit des en-têtes CORS qui autorisent votre demande.

Utiliser un plugin (ancienne réponse)

En plus des suggestions précédemment publiées, j'ai trouvé que le plugin Postman pour Chrome fonctionnait très bien. Il vous permet de définir des en-têtes et des paramètres d'URL, d'utiliser l'authentification HTTP, d'enregistrer la demande que vous exécutez fréquemment, etc.

Si vous souhaitez modifier et réémettre une demande que vous avez capturée dans l'onglet Réseau des outils de développement Chrome:

• Cliquez avec le bouton droit sur Namela demande
• Sélectionner Copy > Copy as cURL
• Coller sur la ligne de commande (la commande inclut des cookies et des en-têtes)
• Modifier la demande au besoin et exécuter

Je sais, ancien poste ... mais il pourrait être utile de laisser ceci ici.

Les navigateurs modernes prennent désormais en charge l' API Fetch .

Vous pouvez l'utiliser comme ceci:

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: Il effectuera tous les contrôles CORS, car il s'agit d'une amélioration XmlHttpRequest.

Si votre page Web contient jquery dans votre page, vous pouvez le faire en écrivant sur la console des développeurs Chrome:

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

Sa façon jquery de le faire!

Développer la réponse @dhfsk

Voici mon workflow

1. Dans Chrome DevTools, cliquez avec le bouton droit sur la demande que vous souhaitez manipuler> Copy as cURL

2. Postman ouvert

3. Cliquez Importdans le coin supérieur gauche puisPaste Raw Text

Si vous souhaitez effectuer un POST à ​​partir du même domaine, vous pouvez toujours insérer un formulaire dans le DOM à l'aide des outils Developer et soumettre que:

J'ai eu la meilleure chance de combiner deux des réponses ci-dessus. Accédez au site dans Chrome, puis recherchez la demande dans l'onglet Réseau de DevTools. Cliquez avec le bouton droit sur la demande et sur Copier, mais sur Copier en tant que récupération au lieu de cURL. Vous pouvez coller le code d'extraction directement dans la console DevTools et le modifier, au lieu d'utiliser la ligne de commande.

Pour obtenir des demandes avec des en-têtes, utilisez ce format.

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

si vous utilisez jquery sur votre site Web, vous pouvez utiliser quelque chose comme ça votre 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>

En toute simplicité, si vous souhaitez que la demande utilise le même contexte de navigation que la page que vous consultez déjà, faites-le dans la console Chrome:

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