Выполнение запросов HTTP с помощью инструментов разработчика Chrome

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

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

Здесь мой рабочий процесс

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

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

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

Ответ 11

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