web-dev-qa-db-de.com

HTTP-Anforderungen mit Chrome Developer-Tools erstellen

Gibt es eine Möglichkeit, eine HTTP-Anfrage mit den Chrome Developer Tools auszuführen, ohne ein Plugin wie POSTER zu verwenden?

112
leojh

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.

69

Wenn Sie eine Anforderung bearbeiten und erneut ausgeben möchten, die Sie auf der Registerkarte "Netzwerk" der Chrome Developer Tools erfasst haben:

  • Klicken Sie mit der rechten Maustaste auf die Variable Name der Anforderung
  • Copy > Copy as cURL auswählen
  • Einfügen in die Befehlszeile (Befehl enthält Cookies und Header)
  • Bearbeiten Sie die Anforderung nach Bedarf und führen Sie sie aus

 enter image description here

118
apricot

Ich 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.

22
tomblue

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!

11
sadaf2605

Wenn Sie einen POST von derselben Domäne ausführen möchten, können Sie jederzeit ein Formular mit Entwicklertools in das DOM einfügen und dieses senden:

 Inserted form into document

6
Craig Curtis

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";
2
Dave Potts

Erweiterung auf @dhfsk Antwort

Hier ist mein Workflow

  1. Klicken Sie in Chrome DevTools mit der rechten Maustaste auf die Anforderung, die Sie bearbeiten möchten,> Copy as cURL Chrome DevTools Copy as cURL

  2. Postbote öffnen

  3. Klicken Sie oben links auf Import und dann auf Paste Raw Text Postman Paste Raw Text cURL from Chrome
2
Korayem

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>

0
Nazor

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.

0
Aaron Parke

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.

0
Sagar Ranglani