Jak korzystać z sieciowego debuggera Chrome z przekierowaniami

379

Debuger sieci Chrome zapewnia mi doskonały widok wszystkich zasobów HTTP załadowanych dla strony. Ale usuwa listę za każdym razem, gdy ładowana jest nowa strona HTML najwyższego poziomu. To bardzo utrudnia debugowanie stron, które automatycznie ładują się ponownie z tego czy innego powodu (uruchamianie skryptu lub 300 odpowiedzi).

Czy mogę powiedzieć Chromeowi, aby nie kasował debugera sieciowego po załadowaniu nowej strony najwyższego poziomu? Czy mogę wrócić i sprawdzić zasoby sieciowe poprzedniej strony?

Czy mogę w jakiś sposób zmusić Chrome do wstrzymania przed załadowaniem nowej strony, gdy nie kontroluję strony, którą próbuję debugować, która dokonuje przekierowania? Jest to część tańca OpenID, który idzie nie tak, więc połączenie SSL i poświadczeń bardzo utrudnia debugowanie za pomocą narzędzi wiersza polecenia.

http google-chrome google-chrome-devtools

— Leopd
źródło

W jaki sposób ten duplikat uzyskał więcej głosów pozytywnych niż ten opublikowany 1 miesiąc wcześniej? stackoverflow.com/q/10703944/632951

— Pacerier

6

@Pacerier Ten, który podłączyłeś, nie wydaje się być opublikowany przez Ciebie, ale prawdopodobnie istnieje brak uzasadnienia, że w tytule nie ma „Chrome”. Gdy ludzie szukają czegoś związanego z Chrome, ich wyszukiwanie zwykle obejmuje słowo kluczowe Chrome. „Narzędzia programistyczne Google” są niezwykle niejednoznaczne.

— Joel Mellon,

gist.github.com/InstanceOfMichael/f6a509b84fe82a718816

— diosney

527

Zostało to zmienione od wersji 32, dzięki @Daniel Alexiuc i @Thanatos za komentarze.

Prąd (≥ v32)

U góry karty „Sieć” DevTools znajduje się pole wyboru, aby włączyć funkcję „Zachowaj dziennik”. Jeśli jest zaznaczone, dziennik sieci jest zachowywany przy ładowaniu strony.

Karta sieciowa Chrome v33 DevTools: zachowaj dziennik

Mała czerwona kropka po lewej stronie ma teraz za zadanie całkowicie włączyć i wyłączyć logowanie do sieci.

starsza wersja

W starszych wersjach Chrome (tutaj v21) w stopce karty „Sieć” znajduje się mała, klikalna czerwona kropka.

Karta sieciowa DevTools Chrome v22: Zachowaj dziennik podczas nawigacji

Jeśli najedziesz na niego myszą, powie ci, że po aktywacji „Zachowa dziennik podczas nawigacji”. Zawiera obietnicę.

— bfncs
źródło

1

W wersji 32 nadal tam jest, ale został przeniesiony na górę panelu sieciowego.

— Daniel Alexiuc

4

Właściwie jest teraz na górze, ale nazywa się „Zachowaj dziennik” i jest polem wyboru. Mylące jest to, że nadal jest czerwona ikona nagrywania, ale to tylko, czy w ogóle się zalogować.

— Tanatos

1

Dzięki za skomentowanie zmiany, właśnie zaktualizowałem odpowiedź.

— bfncs,

@ruben, interfejs rzeczywiście wygląda teraz trochę inaczej, ale nadal u góry karty sieci znajduje się pole wyboru „Zachowaj dziennik”: i.imgur.com/fhSDYSz.png

— bfncs

14

@ rubenlop88 Upewnij się, że nie filtrujesz dokumentów , w przeciwnym razie nie będą się tam utrzymywać. Możesz to sprawdzić w zakładce Inne .

— Alex

173

Nie znam sposobu, aby zmusić Chrome, aby nie wyczyścił debugera sieciowego, ale może to osiągnąć to, czego szukasz:

Otwórz konsolę js
window.addEventListener("beforeunload", function() { debugger; }, false)

Spowoduje to wstrzymanie chrome przed załadowaniem nowej strony przez uderzenie w punkt przerwania.

— Matt York
źródło

55

To nie była właściwa odpowiedź na pytanie, ale to jest rzeczywiście to, co ja szukałem. Dzięki.

— isaaclw

2

To takie śliskie. Przybyłem tutaj, szukając rozwiązania „pauza przed przekierowaniem” i oto jest. Przyjęta odpowiedź jest łatwiejsza do zapamiętania, ale jest to rad.

— Joel Mellon,

19

Jest to niezwykle przydatne, ponieważ chrome nie wyświetla treści odpowiedzi serwera, jeśli przeglądarka przekierowuje bezpośrednio po otrzymaniu odpowiedzi.

— Kristóf Dombi

23

Po prostu aktualizacja odpowiedzi @bfncs

Myślę, że w przypadku Chrome 43 zachowanie nieco się zmieniło. Nadal musisz włączyć opcję Zachowaj dziennik, aby zobaczyć, ale teraz przekieruj pokazane na karcie Inne, gdy załadowany dokument jest pokazany w Doc.

To zawsze mnie myli, ponieważ mam wiele żądań sieciowych i filtruję je według typu XHR, Doc, JS itp. Ale w przypadku przekierowania karta Doc jest pusta, więc muszę zgadywać.

— sf
źródło

1

Jesteś bohaterem, którego szukałem!

— Matthew Haworth

23

Innym doskonałym rozwiązaniem do debugowania połączeń sieciowych przed przekierowaniem na inne strony jest wybranie beforeunloadpunktu przerwania zdarzenia

W ten sposób możesz przerwać przepływ bezpośrednio przed przekierowaniem go na inną stronę, w ten sposób wszystkie połączenia sieciowe, dane sieciowe i dzienniki konsoli nadal tam są.

To rozwiązanie jest najlepsze, gdy chcesz sprawdzić, jaka jest odpowiedź na połączenia

PS: Możesz także użyć punktów przerwania XHR, jeśli chcesz zatrzymać się tuż przed określonym połączeniem lub dowolnym połączeniem (patrz przykładowy obraz)

— Ofear
źródło

2

To jest świetne. Dzięki loadwydarzeniu możemy zatrzymać się na początku i łatwo ustawić punkt przerwania. Dzięki!

— LeOn - Han Li