Как я могу отладить HTTP POST в Chrome?

Я хотел бы просмотреть данные HTTP POST, отправленные в Chrome.

Теперь данные в памяти, и у меня есть возможность повторно отправить форму.

Я знаю, что в случае повторной отправки сервер выдаст ошибку. Могу ли я просмотреть данные, находящиеся в памяти Chrome?

1. Перейдите в Инструменты разработчика Chrome (Меню Chrome -> Дополнительные инструменты -> Инструменты разработчика)
2. Выберите вкладку «Сеть»
3. Обновить страницу, на которой вы находитесь
4. Вы получите список запросов http, которые произошли, когда сетевая консоль была включена. Выберите один из них слева
5. Выберите вкладку «Заголовки»

Вуаля!

Вы можете фильтровать запросы HTTP POST с помощью Chrome DevTools . Просто сделайте следующее:

1. Откройте Chrome DevTools ( Cmd+ Opt+ Iна Mac, Ctrl+ Shift+ Iили F12на Windows) и нажмите на вкладку «Сеть»
2. Нажмите на значок «Фильтр»
3. Введите метод фильтра: method:POST
4. Выберите запрос, который вы хотите отладить
5. Посмотреть детали запроса, который вы хотите отладить

Скриншот

Протестировано с Chrome версии 53.

Вы можете использовать Canary-версию Chrome, чтобы увидеть полезную нагрузку POST-запросов.

Еще одна полезная опция - это специальный инструмент отладки HTTP. Есть несколько доступных, я бы предложил HTTP Toolkit : проект с открытым исходным кодом, над которым я работал (да, я могу быть предвзятым), чтобы решить эту проблему для себя.

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

В этом случае он покажет вам полное тело POST, которое вы ищете, с дружественным редактором и подсветкой (все работает на VS Code ), чтобы вы могли покопаться. Конечно, он даст вам заголовки запроса и ответа, но с дополнительной информацией, такой как документы из MDN ( Mozilla Developer Network ), для каждого стандартного заголовка и кода состояния, которые вы можете увидеть.

Изображение стоит тысячи ответов StackOverflow:

Другие люди дали очень хорошие ответы, но я хотел бы завершить их работу с помощью дополнительного инструмента разработки. Он называется Live HTTP Headers и вы можете установить его в свой Firefox , а в Chrome у нас есть такой же плагин, как этот .

Работать с ним довольно легко.

1. Используя Firefox, перейдите на веб-сайт, на который вы хотите получить свой почтовый запрос.

2. В вашем Firefox меню Инструменты-> Live Http Headers

3. Откроется новое окно, и все детали метода http будут сохранены в этом окне для вас. Вам не нужно ничего делать на этом этапе.

4. На веб-сайте выполните действие (войдите, отправьте форму и т. Д.)

5. Посмотрите на ваш плагин в окне. Это все записано.

Просто помните , что вам нужно проверить в Capture .

Сложная ситуация: если вы отправляете форму сообщения, Chrome откроет новую вкладку для отправки запроса. Это верно до сих пор, но если это вызовет событие для загрузки файла (ов) , эта вкладка будет немедленно закрыта, так что вы не можете захватить этот запрос в Dev Tool.

Решение. Перед отправкой формы публикации необходимо отключить сеть , в результате чего запрос не может быть успешно отправлен, чтобы вкладка не была закрыта. И тогда вы можете захватить сообщение с запросом в Chrome Devtool (при необходимости обновляя новую вкладку)