Надсилання запитів HTTP за допомогою інструментів розробника Chrome

Чи є спосіб зробити запит HTTP за допомогою інструментів розробника Chrome, не використовуючи плагін типу POSTER?

Оскільки API Fetch підтримується Chrome (і більшістю інших браузерів), тепер робити запити HTTP з консолі devtools досить просто.

Для того, щоб ОТРИМАТИ файл в форматі JSON, наприклад:

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

Або POST новий ресурс:

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 фактично також підтримує новий синтаксис асинхронізації / очікування (навіть якщо очікування, як правило, може бути використане лише у функції асинхронізації):

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

Зауважте, що ваші запити будуть підпадати під дію тієї самої політики походження , як і будь-який інший HTTP-запит у браузері, тому або уникайте перехресних запитів, або переконайтеся, що сервер встановлює заголовки CORS, які дозволяють ваш запит.

Використання плагіна (стара відповідь)

Як додаток до опублікованих раніше пропозицій, я встановив, що плагін Postman для Chrome працює дуже добре. Це дозволяє встановлювати заголовки та параметри URL, використовувати автентифікацію HTTP, зберігати запит, який ви часто виконуєте тощо.

Якщо ви хочете відредагувати та надрукувати повторно запит, який ви зробили на вкладці Мережа інструментів розробника Chrome:

• Клацніть правою кнопкою миші Nameзапит
• Виберіть Copy > Copy as cURL
• Вставити до командного рядка (команда включає файли cookie та заголовки)
• Відредагуйте запит за потребою та запустіть

Я знаю, стара посада ... але це може бути корисно залишити тут.

Сучасні браузери тепер підтримують API Fetch .

Ви можете використовувати його так:

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: Це зробить усі перевірки CORS, оскільки це покращено XmlHttpRequest.

Якщо на вашій сторінці є jquery на вашій сторінці, ви можете зробити це, написавши на хронічній консолі розробника:

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

Її спосіб запитання!

Розширення на відповідь @dhfsk

Ось мій робочий процес

1. У Chrome DevTools натисніть правою кнопкою миші запит, яким ви хочете маніпулювати> Copy as cURL

2. Відкритий листоноша

3. Натисніть Importу верхньому лівому куті потімPaste Raw Text

Якщо ви хочете зробити POST з того самого домену, ви завжди можете вставити форму в DOM за допомогою інструментів Developer і надіслати це:

Мені пощастило поєднати дві відповіді вище. Перейдіть на сайт у Chrome, а потім знайдіть запит на вкладці «Мережа» DevTools. Клацніть правою кнопкою миші запит і скопіюйте, але скопіюйте як отримання замість CURL. Ви можете вставити код отримання безпосередньо в консоль DevTools і відредагувати його, замість того, щоб використовувати командний рядок.

Для отримання запитів із заголовками використовуйте цей формат.

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

якщо ви використовуєте jquery на своєму веб-сайті, ви можете використовувати щось подібне до вашої консолі

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

Якщо ви хочете, щоб запит використовував той самий контекст перегляду, що і сторінка, яку ви вже переглядаєте, у консолі Chrome просто виконайте такі дії:

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