Erstellen von HTTP-Anforderungen mit Chrome Developer-Tools

205

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

Leojh
quelle
1
Möchten Sie Anfragen domänenübergreifend oder in derselben Domäne stellen, in der Sie die Entwicklertools geöffnet haben?
Lukas
6
Für alle, die diese Funktion wünschen
markieren Sie
1
Alle waren nützliche Antworten, ich wollte nur ein Tool hinzufügen, das ich für Advanced Rest Client ziemlich nützlich finde . Dies kann dazu beitragen, auf lange Sicht viel Zeit zu sparen, wenn mehrere API-Anforderungen gestellt werden.
Sagar Ranglani
6
Firefox ist dafür eine bessere Option. Klicken Sie einfach mit der rechten Maustaste auf die Anfrage und senden Sie sie erneut oder bearbeiten Sie sie und senden Sie sie erneut.
Eusoubrasileiro
@eusoubrasileiro: Danke. Die Schaltfläche Bearbeiten und erneut senden auf der Registerkarte Netzwerk in Firefox zum erneuten Senden einer Anfrage ist eine wirklich nette Funktion. Hoffe, jemand wirft eine Anfrage auf, es auch in Chrom hinzuzufügen
firstpostcommenter

Antworten:

185

Seit der Fetch API von Chrome (und den meisten anderen Browsern) unterstützt wird, ist es jetzt recht einfach, HTTP-Anforderungen über die devtools-Konsole zu stellen.

So rufen Sie eine JSON-Datei ab:

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

Oder 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ützen tatsächlich auch die neue Async / Warten-Syntax (obwohl Warten 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 Anfragen der Richtlinie mit demselben Ursprung unterliegen wie jede andere HTTP-Anforderung im Browser der Vermeiden Sie daher entweder Anforderungen für unterschiedliche Herkunft oder stellen Sie sicher, dass der Server CORS-Header festlegt, die Ihre Anforderung zulassen.

Verwenden eines Plugins (alte Antwort)

Als Ergänzung zu zuvor veröffentlichten Vorschlägen habe ich festgestellt, dass das Postman- Plugin für Chrome sehr gut funktioniert. Hier können Sie Header und URL-Parameter festlegen, die HTTP-Authentifizierung verwenden, häufig ausgeführte Anforderungen speichern und so weiter.

Christofer Eliasson
quelle
3
Da die Operation eine Antwort mit Postman akzeptiert hat: Wenn Sie in den dev-tools mit der rechten Maustaste auf die Anfrage klicken und "Als cURL kopieren", können Sie den Befehl cURL in Postman importieren, um die Anfrage erneut zu senden / zu ändern. Siehe: getpostman.com/docs/postman/collections/data_formats -> "Importieren als cURL"
dhfsk
1
Wie mache ich eine Post-Anfrage?
Nuhman
7
@Nuhman Fetch nimmt ein zweites Argument, wo Sie die Anfrage konfigurieren könnenfetch("/echo/json/", { method: "POST", body: data })
Christofer Eliasson
1
Beachten Sie, dass es auch möglich ist, Anforderungen aus dem Chrome Dev Tools-Netzwerkverlauf als Abruf zu kopieren .
Vadzim
1
@mathtick Es gibt eine modeAnforderungsoption, die Sie verwenden können : fetch("/echo/json/", { method: 'POST', mode: 'no-cors' }. Beachten Sie diesen Modus: "no-cors" erlaubt nur einen begrenzten Satz von Headern in der Anfrage. Weitere Informationen zur Verwendung von Fetch und No-Cors
Christofer Eliasson
154

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 Name auf die Anfrage
  • Wählen Copy > Copy as cURL
  • Einfügen in die Befehlszeile (Befehl enthält Cookies und Header)
  • Bearbeiten Sie die Anforderung nach Bedarf und führen Sie sie aus

Geben Sie hier die Bildbeschreibung ein

Aprikose
quelle
11
Firefox ermöglicht es Ihnen, den Anruf vor der Wiedergabe zu bearbeiten, aber es gibt keine solche Option in Chrome, so dass die obige Antwort der
richtige
3
Mit Chrome 63+ funktioniert das Einfügen von CURL in die Konsole nicht.
Ravi Parekh
2
@ RaviParekh Ich glaube nicht, dass er Chrome-Konsole meinte, er meinte die OS-Befehlszeile
Korayem
4
Das Kopieren als Abruf ermöglicht die erneute Ausgabe geänderter Anforderungen direkt von der Chrome Dev Tools-Konsole und ist eine praktikable Alternative für diejenigen, die keine CURL haben oder sich damit beschäftigen möchten.
Vadzim
1
Bei Verwendung von Curl ist das Ergebnis manchmal nicht dasselbe. Ich kam hierher, um zu wissen, ob ich vom Browser anfordern könnte. Javascript des Browsers verwenden. Es ermöglicht mir, CORS-Probleme zu reproduzieren, was eine Locke von meinem Terminal mich nicht erleuchten sollte.
Garry Dias
32

Ich weiß, alter Beitrag ... aber es könnte hilfreich sein, dies hier zu lassen.

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

ps: Es werden alle CORS-Prüfungen durchgeführt, da es verbessert wurde XmlHttpRequest.

Tomblue
quelle
13

Wenn Ihre Webseite jquery auf Ihrer Seite enthält, können Sie dies auf der Chrome-Entwicklerkonsole schreiben:

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

Seine jquery Art, es zu tun!

sadaf2605
quelle
14
Dies setzt voraus, dass die Webseite jQuery
mikemaccana
2
Denken GETSie daran, dies ist nur für Anfragen, wenn Sie andere Arten von Anfragen machen möchten, können Sie verwenden$.ajax
aksu
@mikemaccana Sie können jQuery über die Konsole auf jede Seite laden.
Nehem
1
Sovar script = document.createElement("script"); script.src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"; document.body.appendChild(script);
nehem
1
@itsneo Antwort war genau vor Ort! Möglichkeit, jquery zu laden, wenn auf die Seite, auf die zugegriffen wird, diese noch nicht vorhanden ist. Dann können Sie $ .ajax oder ein gleichwertiges Produkt verwenden, ohne ein Plugin zu benötigen
Renato Chencinski
12

Erweitern 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 Als cURL kopieren

  2. Postbote öffnen

  3. Klicken Sie dann Importin die obere linke EckePaste Raw Text Postman Paste Raw Text cURL aus Chrome
Korayem
quelle
7

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

Formular in Dokument eingefügt

Craig Curtis
quelle
4

Ich hatte das beste 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 kopieren Sie, aber kopieren Sie als Abruf anstelle von cURL. Sie können den Abrufcode direkt in die DevTools-Konsole einfügen und bearbeiten, anstatt die Befehlszeile zu verwenden.

Aaron Parke
quelle
3
Verweisen Sie sie nicht als "zwei Antworten oben", da sich dies beim Upvoting / Downvoting ändern könnte
Urosh T.
4

Verwenden Sie dieses Format, um Anforderungen mit Headern abzurufen.

   fetch('http://example.com', {
      method: 'GET',
      headers: new Headers({
               'Content-Type': 'application/json',
               'someheader': 'headervalue'
               })
    })
    .then(res => res.json())
    .then(console.log)
Nirojan Selvanathan
quelle
2

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>

Nazor
quelle
1

Wenn Sie möchten, dass die Anforderung denselben Browserkontext wie die Seite verwendet, die Sie bereits anzeigen, müssen Sie in der Chrome-Konsole Folgendes tun:

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

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

Fady Sadakah
quelle
1
Sie sollten Ihre Antwort erklären und nicht nur einen zufälligen Code posten.
Jakub Muda