Выполнение HTTP-запросов с использованием инструментов Chrome Developer

Есть ли способ сделать HTTP-запрос с помощью инструментов Chrome Developer, не используя такой плагин, как POSTER?

Поскольку Fetch API поддерживается Chrome (и большинством других браузеров), теперь довольно просто делать HTTP-запросы из консоли devtools.

Для того, чтобы ПОЛУЧИТЬ файл в формате JSON, например:

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

Или ПОСТАВИТЬ новый ресурс:

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 Developer Tools:

• Щелкните правой кнопкой мыши Nameзапрос
• Выбрать Copy > Copy as cURL
• Вставить в командную строку (команда включает куки и заголовки)
• Редактировать запрос по мере необходимости и запустить

Я знаю, старый пост ... но может быть полезно оставить это здесь.

Современные браузеры теперь поддерживают Fetch API .

Вы можете использовать это так:

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, то вы можете сделать это, написав на консоли разработчика Chrome:

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

Его JQuery способ сделать это!

Расширение на @dhfsk ответ

Вот мой рабочий процесс

1. В Chrome DevTools щелкните правой кнопкой мыши запрос, которым вы хотите управлять> Copy as cURL

2. Открытый почтальон

3. Нажмите Importв верхнем левом углу, затемPaste Raw Text

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

Мне повезло, объединяя два ответа выше. Перейдите на сайт в Chrome, затем найдите запрос на вкладке «Сеть» DevTools. Щелкните правой кнопкой мыши запрос и скопируйте, но скопируйте как fetch вместо 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";