Erstellen von HTTP-Anforderungen mit Chrome Developer-Tools

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

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.

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

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.

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!

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

2. Postbote öffnen

3. Klicken Sie dann Importin die obere linke EckePaste Raw Text

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:

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.

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)

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>

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";