web-dev-qa-db-fra.com

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

Existe-t-il un moyen de faire une requête HTTP en utilisant les outils de développement Chrome sans utiliser un plugin tel que POSTER?

google-chromegoogle-chrome-devtools
112
leojh

Étant donné que Fetch API est pris 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 OBTENIR 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)

En fait, Chrome Devtools prend également en charge la nouvelle syntaxe async/wait (même si wait ne peut normalement ê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 politique de même origine , comme toute autre demande HTTP dans le navigateur, évitez donc les demandes d'origine croisée ou assurez-vous que le serveur définit les en-têtes CORS qui permettent votre demande.

Utiliser un plugin (ancienne réponse)

En plus des suggestions précédemment publiées, le plug-in Postman pour Chrome fonctionne 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 les requêtes que vous exécutez fréquemment, etc.

69
Christofer Eliasson

Si vous souhaitez modifier et réémettre une demande que vous avez capturée dans l'onglet Réseau de Chrome Developer Tools:

  • Cliquez avec le bouton droit sur la Name de la demande.
  • Sélectionnez Copy > Copy as cURL
  • Coller en ligne de commande (la commande inclut les cookies et les en-têtes)
  • Modifiez la demande selon vos besoins et exécutez-la.

 enter image description here

118
apricot

Je sais, vieux post ... mais il pourrait être utile de laisser ceci ici.

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

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(y => console.log(y)); // print your data
     });

obs: Toutes les vérifications CORS seront effectuées, car il s'agit d'une XmlHttpRequest améliorée.

22
tomblue

Si votre page Web contient jquery, vous pouvez l'écrire sur la console de développement de chrome:

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

Sa façon jquery de le faire!

11
sadaf2605

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 de développement et soumettre ce qui suit:

 Inserted form into document

6
Craig Curtis

En toute simplicité, si vous souhaitez que la demande utilise le même contexte de navigation que la page que vous consultez déjà, procédez comme suit:

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

Développer @dhfsk répondre

Voici mon flux de travail

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

  2. Postman ouvert

  3. Cliquez sur Import dans le coin supérieur gauche puis sur Paste Raw Text Postman Paste Raw Text cURL from Chrome
2
Korayem

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

0
Nazor

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 de la souris sur la demande et sur Copier, mais 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.

0
Aaron Parke

Toutes étaient des réponses utiles, je voulais juste ajouter un outil que je trouve assez utile Advanced Rest Client . 

Son utilisation peut vous aider à gagner beaucoup de temps à long terme si vous allez faire plusieurs demandes d'API.

0
Sagar Ranglani