Faire des requêtes HTTP à l’aide des outils Chrome Developer

Est-il possible de faire une requête HTTP en utilisant les outils Chrome Developer sans utiliser un plugin comme POSTER?

L’ API Fetch étant prise en charge par Chrome (et la plupart des autres navigateurs), il est désormais très facile de créer des requêtes HTTP à partir de la console devtools.

Pour récupérer un fichier JSON par exemple:

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

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 le Name de la demande
  • Sélectionnez Copy > Copy as cURL
  • Coller sur la ligne de commande (la commande inclut les cookies et les en-têtes)
  • Modifier la demande en fonction des besoins et exécuter

entrer la description de l'image ici

Je sais, vieux message … mais il pourrait être utile de laisser ça ici.

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

Vous pouvez l’utiliser comme ceci:

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

obs: Il effectuera tous les contrôles CORS, car il s’agit d’un XmlHttpRequest amélioré.

Si votre page Web a 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 de faire!

Si vous voulez faire un POST du même domaine, vous pouvez toujours insérer un formulaire dans le DOM en utilisant les outils Developer et soumettre ce qui suit:

Formulaire inséré dans le document

Pour simplifier, si vous souhaitez que la requête utilise le même contexte de navigation que la page que vous consultez déjà, dans la console Chrome, procédez comme suit:

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

Toutes étaient des réponses utiles, je voulais juste append un outil que je trouve très utile Advanced Rest Client .

Utiliser ceci peut aider à gagner beaucoup de temps à long terme si l’on veut faire plusieurs demandes d’API.

Si vous utilisez jquery sur votre site Web, vous pouvez utiliser quelque chose comme ça sur votre console

 $.post( 'dom/data-home.php', { type : "home", id : "0" },function(data){ console.log(data) })