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


196

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

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

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


Вот хороший пример видео-giff о том, как попасть на вкладку сети здесь: wpza.net/using-google-chrome-to-capture-post-data-in-wordpress
WPZA

Ответы:


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

Вуаля!

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


74
Это ПОЛУЧИТЬ, а не ПОСТ
QkiZ

7
Он захватывает как запросы GET, так и POST, @QkiZ
almulo

48
Примечание. Чтобы увидеть почтовый запрос, который перезагружает вашу страницу, вам необходимо установить флажок «Сохранить журнал».
Брайс Гуинта

39
Я пропустил тело запроса здесь? :-(
Тимо

3
В Chrome 71 тело (т. Е. Данные POST-редактирования) отображается в нижней части вкладки «Заголовки» под заголовком «Запросить полезную нагрузку».
MSC

139

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

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

Скриншот

Chrome DevTools

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


1
Работал на Chrome 70. Фильтрация с использованием method:POSTочень полезна
user1071847

14

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

Запросить полезную нагрузку


Есть ли ссылки на более подробную информацию об этом или когда он изменился? РЕДАКТИРОВАТЬ: ответил на мой собственный вопрос. Если вы используете API Fetch, Chrome не собирает эти запросы для отображения на вкладке . Очевидно, Канарские острова есть или будут в ближайшее время.
virtualandy

6
Теперь он доступен в стандартных сборках самого Chrome!
Nachiketha

5

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

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

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

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

Снимок экрана HTTP Toolkit, показывающий POST-запрос и его тело


1
Выглядит очень многообещающе, но на моей машине есть некоторые проблемы, размещенные на GitHub.
userlond

0

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

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

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

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

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

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

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

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

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


0

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

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

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