Як я можу налагодити 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 ) для кожного стандартного заголовка та коду статусу, який ви можете побачити.

Малюнок вартує тисячі відповідей StackOverflow:

Інші люди дали дуже приємні відповіді, але я хотів би завершити свою роботу додатковим інструментом розвитку. Це називається Live HTTP заголовки, і ви можете встановити його у свій Firefox , а в Chrome ми маємо такий самий плагін, як цей .

Працювати з нею легко.

1. Використовуючи свій Firefox, перейдіть на веб-сайт, на який ви хочете отримати свій поштовий запит.

2. У меню Firefox Інструменти-> Заголовки HTTP Live

3. З'явиться нове вікно для вас, і всі деталі методу http будуть збережені у цьому вікні для вас. На цьому кроці вам нічого не потрібно робити.

4. На веб-сайті виконайте діяльність (увійдіть, надішліть форму тощо)

5. Подивіться на свій модуль підключення. Це все записано.

Просто пам'ятайте , що вам потрібно перевірити в Capture .

У цій ситуації складна ситуація: якщо ви надсилаєте форму публікації, Chrome відкриє нову вкладку для надсилання запиту. Це дотепер, але якщо це спричинить подію для завантаження файлів , ця вкладка буде негайно закрита, так що ви не зможете зафіксувати цей запит у інструменті Dev.

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