Создание HTTP-запросов с помощью инструментов разработчика Chrome

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

100
google-chrome google-chrome-devtools

9 ответов

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

чтобы получить файл JSON, например:

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

Chrome Devtools фактически также поддерживает новый синтаксис async/await (хотя await обычно может использоваться только в асинхронной функции):

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

обратите внимание, что ваши запросы будут подлежать политика того же происхождения, как и любой другой HTTP-запрос в браузере, поэтому либо избегайте перекрестных запросов, либо убедитесь, что сервер устанавливает заголовки CORS, которые позволяют ваш запрос.

использование плагина (старый ответ)

в дополнение к ранее опубликованным предложениям я нашел почтальон плагин для Chrome работает очень хорошо. Он позволяет устанавливать заголовки и параметры URL, использовать аутентификацию HTTP, сохранять запрос выполнять часто и так далее.

52

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

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

enter image description here

109

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

современные браузеры теперь поддержка получить API-интерфейс.

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

fetch("<url>")
    .then(data => {
         data.json() // could be .text() or .blob() depending on the data you are expecting
         .then(y => console.log(y)); // print your data
     });

obs: он сделает все проверки CORS, так как это улучшенный XmlHttpRequest.

21

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

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

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

10

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

Inserted form into document

6

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

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

все были полезными ответами, просто хотел добавить инструмент, который я нахожу довольно полезным Расширенный Клиент Rest.

с помощью этого может помочь сэкономить много времени в долгосрочной перспективе, если вы собираетесь сделать несколько запросов к API.

0

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

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

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

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

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

  3. клик Import в верхнем-
0