Przesyłanie żądań HTTP za pomocą narzędzi Chrome dla programistów

Czy istnieje sposób na wysłanie żądania HTTP za pomocą narzędzi Chrome dla programistów bez użycia wtyczki takiej jak POSTER?

Ponieważ interfejs API Fetch jest obsługiwany przez Chrome (i większość innych przeglądarek), wysyłanie żądań HTTP z konsoli devtools jest teraz dość łatwe.

Aby GET plik JSON, na przykład:

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

Lub POST nowego zasobu:

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)

Devtools Chrome faktycznie obsługują także nową składnię asynchroniczną / oczekującą (nawet jeśli normalnie funkcja oczekująca może być używana tylko w funkcji asynchronicznej):

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())

Zauważ, że twoje żądania będą podlegały zasadom tego samego pochodzenia , tak jak każde inne żądanie HTTP w przeglądarce, więc albo unikaj żądań krzyżowych lub upewnij się, że serwer ustawia nagłówki CORS, które zezwalają na twoje żądanie.

Korzystanie z wtyczki (stara odpowiedź)

Jako dodatek do wcześniej opublikowanych sugestii zauważyłem, że wtyczka Postman do Chrome działa bardzo dobrze. Pozwala ustawić nagłówki i parametry URL, używać uwierzytelniania HTTP, zapisywać często wykonywane żądania i tak dalej.

Jeśli chcesz edytować i ponownie wysłać żądanie przechwycone na karcie Sieć Narzędzi programistów Chrome:

• Kliknij Nameżądanie prawym przyciskiem myszy
• Wybierz Copy > Copy as cURL
• Wklej do wiersza poleceń (polecenie zawiera pliki cookie i nagłówki)
• Edytuj żądanie w razie potrzeby i uruchom

Wiem, stary post ... ale zostawienie tego tutaj może być pomocne.

Nowoczesne przeglądarki obsługują teraz interfejs API Fetch .

Możesz użyć tego w następujący sposób:

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: Wykona wszystkie kontrole CORS, ponieważ jest to poprawione XmlHttpRequest.

Jeśli twoja strona zawiera jquery na twojej stronie, możesz to zrobić pisząc na konsoli programistów chrome:

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

Jego jquery to zrobić!

Rozwijanie odpowiedzi @dhfsk

Oto mój przepływ pracy

1. W Chrome DevTools kliknij prawym przyciskiem myszy żądanie, którym chcesz manipulować> Copy as cURL

2. Otwórz listonosza

3. Kliknij Importw lewym górnym roguPaste Raw Text

Jeśli chcesz wykonać test POST z tej samej domeny, zawsze możesz wstawić formularz do DOM przy użyciu narzędzi programistycznych i przesłać:

Miałem największe szczęście, łącząc dwie powyższe odpowiedzi. Przejdź do witryny w Chrome, a następnie znajdź żądanie na karcie Sieć w DevTools. Kliknij prawym przyciskiem myszy żądanie i Kopiuj, ale Kopiuj jako pobieranie zamiast cURL. Możesz wkleić kod pobierania bezpośrednio do konsoli DevTools i edytować go, zamiast używać wiersza poleceń.

Aby uzyskać żądania z nagłówkami, użyj tego formatu.

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

jeśli używasz jquery na swojej stronie internetowej, możesz użyć czegoś takiego do konsoli

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

Upraszczając, jeśli chcesz, aby żądanie korzystało z tego samego kontekstu przeglądania, co strona, na którą już patrzysz, w konsoli Chrome po prostu wykonaj:

window.location="https://www.example.com";