Faire des requêtes HTTP en utilisant les outils de développement Chrome
y a-t-il un moyen de faire une demande HTTP en utilisant les outils de développement Chrome sans utiliser un plugin comme POSTER?
9 réponses
depuis que " Fetch API est supporté par Chrome (et la plupart des autres navigateurs), il est maintenant assez facile de faire des requêtes HTTP depuis 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)Chrome Devtools supporte en fait aussi la nouvelle syntaxe async / attente (même si l'attente normalement ne peut être utilisée que dans une fonction async):
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())
notez que vos requêtes seront soumises à la " Politique de même origine , tout comme toute autre requête HTTP dans le navigateur, donc soit éviter les requêtes cross-origin, soit s'assurer que le serveur configure des en-têtes CORS qui permettent votre requête.
utilisant un plugin (ancienne réponse)
comme un ajout à des suggestions précédemment publiées, j'ai trouvé le Postman plugin pour Chrome de travailler très bien. Il vous permet de définir les en-têtes et les paramètres D'URL, utiliser l'authentification HTTP, enregistrer la requête que vous exécutez fréquemment et ainsi de suite.
si vous souhaitez éditer et rééditer une requête que vous avez capturée dans L'onglet Réseau de Chrome Developer Tools:
- clic droit sur le
Namede la requête - sélectionner
Copy > Copy as cURL - coller à la ligne de commande (la commande inclut les cookies et les en-têtes)
- modifier la requête au besoin et exécuter
je sais, old post ... mais il pourrait être utile de laisser ici.
les navigateurs modernes sont maintenant compatibles avec 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: il effectuera toutes les vérifications CORS, puisqu'il s'agit d'une XmlHttpRequest améliorée.
si votre page Web a jquery dans votre page, alors vous pouvez le faire en écrivant sur chrome developers console:
$.get(
"somepage.php",
{paramOne : 1, paramX : 'abc'},
function(data) {
alert('page content: ' + data);
}
);
C'est comme ça que ça marche!
si vous voulez faire un POST à partir du même domaine, vous pouvez toujours insérer un formulaire dans le DOM en utilisant Developer tools et soumettre que:
pour simplifier, si vous voulez que la requête utilise le même contexte de navigation que la page que vous regardez déjà, alors dans la console Chrome faites simplement:
window.location="https://www.example.com";
tous étaient des réponses utiles, je voulais juste ajouter un outil que je trouve très utile client de repos avancé .
utiliser ceci peut aider à gagner beaucoup de temps à long terme si l'on va faire plusieurs requêtes API.
si vous utilisez jquery sur votre site web, vous pouvez utiliser quelque chose comme cela 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 savoir plus sur @dhfsk réponse
Voici mon workflow
-
de Chrome DevTools, droit-cliquez sur la requête que vous voulez manipuler >
Copy as cURL -
Ouvrir Le Facteur
- , Cliquez sur
Importdans le coin supérieur