Gibt es eine Möglichkeit, eine HTTP-Anfrage mit den Chrome Developer Tools auszuführen, ohne ein Plugin wie POSTER zu verwenden?
Da die Fetch-API von Chrome (und den meisten anderen Browsern) unterstützt wird, ist es jetzt ganz einfach, HTTP-Anforderungen von der devtools-Konsole aus zu stellen.
Um GET eine JSON-Datei für ein Beispiel zu erhalten:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(res => res.json())
.then(console.log)
Oder an POST eine neue 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 unterstützt auch die neue async/await-Syntax (obwohl waitit normalerweise nur innerhalb einer async-Funktion verwendet werden kann):
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())
Beachten Sie, dass Ihre Anforderungen der same-Origin-Richtlinie unterliegen, wie bei jeder anderen HTTP-Anforderung im Browser. Vermeiden Sie daher Cross-Origin-Anforderungen oder stellen Sie sicher, dass der Server die zulässigen CORS-Header setzt Ihre Anfrage.
Verwenden eines Plugins (alte Antwort)
Als Ergänzung zu den bereits veröffentlichten Vorschlägen habe ich das Postman Plugin für Chrome als sehr gut gefunden. Damit können Sie Header- und URL-Parameter festlegen, die HTTP-Authentifizierung verwenden, die häufig ausgeführte Anforderung speichern und so weiter.
Wenn Sie eine Anforderung bearbeiten und erneut ausgeben möchten, die Sie auf der Registerkarte "Netzwerk" der Chrome Developer Tools erfasst haben:
Name
der AnforderungCopy > Copy as cURL
auswählenIch weiß, alter Beitrag ... aber es könnte hilfreich sein, das hier zu belassen.
Moderne Browser unterstützen jetzt die Fetch API .
Sie können es so verwenden:
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: Es werden alle CORS-Prüfungen durchgeführt, da es ein verbessertes XmlHttpRequest ist.
Wenn Ihre Webseite eine Jquery auf Ihrer Seite hat, können Sie sie auf der Chrome-Entwicklerkonsole schreiben:
$.get(
"somepage.php",
{paramOne : 1, paramX : 'abc'},
function(data) {
alert('page content: ' + data);
}
);
Es ist JQuery, es zu tun!
Um es einfach zu halten: Wenn Sie möchten, dass die Anforderung denselben Browserkontext wie die bereits verwendete Seite verwendet, tun Sie dies in der Chrome-Konsole:
window.location="https://www.example.com";
Erweiterung auf @dhfsk Antwort
Hier ist mein Workflow
wenn Sie Jquery auf Ihrer Website verwenden, können Sie so etwas wie Ihre Konsole verwenden
$.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>
Ich hatte das Glück, zwei der obigen Antworten zu kombinieren. Navigieren Sie zu der Site in Chrome und suchen Sie die Anforderung auf der Registerkarte Netzwerk von DevTools. Klicken Sie mit der rechten Maustaste auf die Anforderung und auf Kopieren, aber Als Abruf kopieren statt cURL. Sie können den Abrufcode direkt in die DevTools-Konsole einfügen und bearbeiten, anstatt die Befehlszeile zu verwenden.
Alle waren nützliche Antworten, ich wollte nur ein Tool hinzufügen, das ich ziemlich nützlich finde Advanced Rest Client .
Dies kann dazu beitragen, langfristig viel Zeit zu sparen, wenn mehrere API-Anforderungen gestellt werden.