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


207

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


1
Вы надеетесь сделать запросы междоменными или в том же домене, в котором вы открыли инструменты разработчика?
Лукас

6
Для всех людей, которым нужна эта функция - отметьте
Иван Зузак

1
Все были полезными ответами, просто хотел добавить инструмент, который я считаю довольно полезным Advanced Rest Client . Использование этого может помочь сэкономить много времени в долгосрочной перспективе, если вы собираетесь делать несколько запросов API.
Сагар Ранглани

6
Firefox - лучший вариант для этого. просто щелкните правой кнопкой мыши на запрос и повторно отправить или отредактировать и отправить.
eusoubrasileiro

@eusoubrasileiro: Спасибо. Кнопка «Редактировать и повторно отправить» на вкладке «Сеть» в Firefox для повторной отправки запроса - действительно полезная функция. Надеюсь, что кто-то поднимает запрос на добавление его в Chrome
первый посткомментатор

Ответы:


187

Поскольку 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-аутентификацию, сохранять часто выполняемый запрос и так далее.


3
Поскольку операционная служба приняла ответ с помощью Postman: если вы щелкнете правой кнопкой мыши запрос в dev-tools и "Copy as cURL", вы можете затем импортировать команду cURL в Postman, чтобы повторно отправить / изменить запрос. См. Getpostman.com/docs/postman/collections/data_formats -> «Импортировать как cURL»
dhfsk

1
Как сделать почтовый запрос?
Нюман

7
@Nuhman Fetch принимает второй аргумент, в котором вы можете настроить запросfetch("/echo/json/", { method: "POST", body: data })
Christofer Eliasson

1
Обратите внимание, что также можно копировать как получать любые запросы из истории сети Chrome Dev Tools.
Вадим

1
@mathtick Существует modeвариант запроса вы можете использовать: fetch("/echo/json/", { method: 'POST', mode: 'no-cors' }. Обратите внимание, что режим: «no-cors» разрешает только ограниченный набор заголовков в запросе. Подробнее об использовании fetch и no-cors
Кристофер Элиассон,

154

Если вы хотите отредактировать и повторно отправить запрос, полученный на вкладке «Сеть» в Chrome Developer Tools:

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

введите описание изображения здесь


11
Firefox позволяет редактировать вызов перед воспроизведением, но в chrome такой опции нет, поэтому ответ выше - путь
Tofeeq

3
В chrome 63+ вставка CURL в консоль не работает.
Рави Парех

2
@RaviParekh Я не думаю, что он имел в виду консоль Chrome, он имел в виду командную строку ОС
Korayem

4
Копировать как извлечение позволяет переиздавать измененные запросы непосредственно из консоли Chrome Dev Tools и является жизнеспособной альтернативой для тех, у кого нет cURL или желание беспокоиться об этом.
Вадим

1
Но, используя curl, иногда результат не совпадает. Я пришел сюда, чтобы узнать, могу ли я запросить у браузера. Использование браузера JavaScript. Это позволяет мне воспроизводить CORS-проблемы, то, что мне не должно показывать завиток моего терминала.
Гарри Диас

32

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

Современные браузеры теперь поддерживают 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.


13

Если на вашей веб-странице есть jquery, то вы можете сделать это, написав на консоли разработчика Chrome:

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

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


14
Это предполагает, что веб-страница будет использовать jQuery
mikemaccana

2
Помните, что это только для GETзапросов, если вы хотите делать другие типы запросов, вы можете использовать$.ajax
aksu

@mikemaccana Вы можете загрузить jQuery на любую страницу через консоль.
Нехем,

1
Как этоvar script = document.createElement("script"); script.src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"; document.body.appendChild(script);
nehem

1
@itsneo ответ был на месте! Способ загрузки JQuery, если на странице, к которой осуществляется доступ, ее еще нет. Тогда вы можете использовать $ .ajax или эквивалентный, без необходимости в плагине
Ренато Ченчински

12

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

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

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

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

  3. Нажмите Importв верхнем левом углу, затемPaste Raw Text Почтальон Вставить необработанный текст cURL из Chrome

7

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

Вставленная форма в документ


4

Мне повезло, объединяя два ответа выше. Перейдите на сайт в Chrome, затем найдите запрос на вкладке «Сеть» DevTools. Щелкните правой кнопкой мыши запрос и скопируйте, но скопируйте как fetch вместо cURL. Вы можете вставить код извлечения непосредственно в консоль DevTools и отредактировать его вместо использования командной строки.


3
Не называйте их «двумя ответами выше», потому что это может измениться при голосовании / отказе
Урош Т.

4

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

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

2

если вы используете 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>


1

Проще говоря, если вы хотите, чтобы запрос использовал тот же контекст просмотра, что и страница, которую вы уже просматривали, то в консоли Chrome просто выполните:

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

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>


1
Вы должны объяснить свой ответ, а не просто опубликовать случайный код.
Якуб Муда
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.