Jak mogę debugować HTTP POST w Chrome?

Chciałbym wyświetlić dane HTTP POST wysłane w Chrome.

Dane są teraz w pamięci i mam możliwość ponownego przesłania formularza.

Wiem, że jeśli prześlę ponownie, serwer zgłosi błąd. Czy mimo to mogę wyświetlić dane zapisane w pamięci Chrome?

1. Przejdź do Narzędzi dla programistów Chrome (Menu Chrome -> Więcej narzędzi -> Narzędzia dla programistów)
2. Wybierz kartę „Sieć”
3. Odśwież stronę, na której jesteś
4. Otrzymasz listę zapytań HTTP, które miały miejsce, gdy konsola sieciowa była włączona. Wybierz jeden z nich po lewej stronie
5. Wybierz kartę „Nagłówki”

Voila!

Możesz filtrować żądania HTTP POST za pomocą Chrome DevTools . Po prostu wykonaj następujące czynności:

1. Otwórz Chrome DevTools ( Cmd+ Opt+ Ina Macu, Ctrl+ Shift+ Ilub F12Windows) i kliknij kartę „Sieć”
2. Kliknij ikonę „Filtruj”
3. Wpisz swoją metodę filtrowania: method:POST
4. Wybierz żądanie, które chcesz debugować
5. Wyświetl szczegóły żądania, które chcesz debugować

Zrzut ekranu

Testowane z Chrome w wersji 53.

Możesz użyć Canary w wersji Chrome, aby zobaczyć ładunek żądań żądań POST.

Inną przydatną opcją może być dedykowane narzędzie do debugowania HTTP. Jest kilka dostępnych, sugerowałbym HTTP Toolkit : projekt open source, nad którym pracowałem (tak, mogę być stronniczy), aby rozwiązać ten sam problem dla siebie.

Główną różnicą jest użyteczność i moc. Narzędzia deweloperskie Chrome nadają się do prostych rzeczy, dlatego polecam zacząć od nich, ale jeśli próbujesz zrozumieć informacje tam zawarte, a potrzebujesz więcej wyjaśnień lub więcej mocy, przydatne mogą być odpowiednio ukierunkowane narzędzia!

W tym przypadku pokaże Ci pełną treść testu POST, której szukasz, z przyjaznym edytorem i podświetleniem (wszystkie obsługiwane przez VS Code ), dzięki czemu możesz kopać. Będzie oczywiście zawierał nagłówki z żądaniami i odpowiedziami, ale z dodatkowymi informacjami, takimi jak dokumenty z MDN ( Mozilla Developer Network ) dla każdego standardowego nagłówka i kodu statusu, jaki możesz zobaczyć.

Obraz jest wart tysiąca odpowiedzi StackOverflow:

Inni ludzie udzielili bardzo miłych odpowiedzi, ale chciałbym zakończyć ich pracę dodatkowym narzędziem programistycznym. Nazywa żywo nagłówków HTTP i można zainstalować go w Firefoksie , aw Chrome mamy taką samą wtyczkę jak ten .

Praca z nim jest łatwa.

1. Korzystając z przeglądarki Firefox, przejdź do strony internetowej, na którą chcesz otrzymać prośbę o wpis.

2. W menu Firefox Narzędzia-> Nagłówki HTTP na żywo

3. Pojawi się nowe okno, a wszystkie szczegóły metody http zostaną zapisane w tym oknie. W tym kroku nie musisz nic robić.

4. Na stronie internetowej wykonaj czynność (zaloguj się, prześlij formularz itp.)

5. Spójrz na okno wtyczki. Wszystko jest rejestrowane.

Wystarczy pamiętać trzeba sprawdzić na przechwytywanie .

Ma trudną sytuację: jeśli prześlesz formularz posta, Chrome otworzy nową kartę, aby wysłać żądanie. Jest to do tej pory, ale jeśli wyzwoli zdarzenie, aby pobrać plik (i) , ta karta zostanie natychmiast zamknięta, aby uniemożliwić przechwycenie tego żądania w Narzędziu programistycznym.

Rozwiązanie: Przed przesłaniem formularza pocztowego należy odciąć sieć , co powoduje, że żądanie nie może zostać pomyślnie wysłane, aby karta nie została zamknięta. Następnie możesz przechwycić komunikat żądania w Chrome Devtool (w razie potrzeby odświeżenie nowej karty)