Wie man den Netzwerk-Debugger von Chrome mit Umleitungen verwendet

Question

Der Netzwerk-Debugger von Chrome gibt mir einen guten Überblick über alle HTTP-Ressourcen, die für eine Seite geladen werden. Allerdings wird die Liste jedes Mal geleert, wenn eine neue HTML-Seite der obersten Ebene geladen wird. Das macht es sehr schwierig, Seiten zu debuggen, die aus dem einen oder anderen Grund automatisch neu geladen werden (laufendes Skript oder 300 Antworten).

Kann ich Chrome anweisen, den Netzwerk-Debugger nicht zu löschen, wenn eine neue Top-Level-Seite geladen wird? Oder kann ich zurückgehen und mir die Netzwerkressourcen der vorherigen Seite ansehen?

Oder kann ich Chrome irgendwie dazu zwingen, vor dem Laden einer neuen Seite zu pausieren, wenn ich die Seite, die ich zu debuggen versuche und die die Umleitung vornimmt, nicht kontrolliere? Es ist Teil eines OpenID-Tanzes, der schief geht, so dass die Kombination von SSL und Anmeldeinformationen es extrem schwierig macht, mit Befehlszeilentools zu debuggen.

Answer 1

Dies wurde seit v32 geändert, danke an @Daniel Alexiuc & @Thanatos für ihre Kommentare.

---

Aktuell ( v32)

Oben auf der Registerkarte "Netzwerk" von DevTools befindet sich ein Kontrollkästchen, mit dem die Funktion "Protokoll beibehalten" aktiviert werden kann. Wenn es aktiviert ist, wird das Netzwerkprotokoll beim Laden der Seite beibehalten.

Der kleine rote Punkt auf der linken Seite hat nun die Aufgabe, die Netzwerkprotokollierung komplett ein- und auszuschalten.

---

Ältere Versionen

In älteren Versionen von Chrome (hier v21) gibt es einen kleinen, anklickbaren roten Punkt in der Fußzeile der Registerkarte "Netzwerk".

Wenn Sie mit dem Mauszeiger darüber fahren, wird Ihnen mitgeteilt, dass das Protokoll bei der Navigation erhalten bleibt, wenn es aktiviert wird. Das ist ein Versprechen.

Answer 2

Ich weiß nicht, wie man Chrome dazu zwingen kann, den Netzwerk-Debugger nicht zu löschen, aber das könnte das erreichen, wonach Sie suchen:

1. Öffnen Sie die js-Konsole
2. window.addEventListener("beforeunload", function() { debugger; }, false)

Dadurch wird Chrome vor dem Laden der neuen Seite angehalten, indem ein Haltepunkt gesetzt wird.

Answer 3

Eine weitere gute Lösung, um die Netzwerkaufrufe zu debuggen, bevor sie auf andere Seiten umgeleitet werden, ist die Auswahl des beforeunload Ereignis-Unterbrechungspunkt

Auf diese Weise wird sichergestellt, dass der Datenfluss kurz vor der Umleitung auf eine andere Seite unterbrochen wird und alle Netzwerkaufrufe, Netzwerkdaten und Konsolenprotokolle erhalten bleiben.

Diese Lösung ist am besten geeignet, wenn Sie die Reaktion der Anrufe überprüfen möchten

P.S.: Sie können auch XHR-Unterbrechungspunkte verwenden, wenn Sie gleich aufhören wollen vor einen bestimmten Anruf oder einen beliebigen Anruf (siehe Bildbeispiel)

Answer 4

Nur Aktualisierung der Antwort von @bfncs

Ich glaube, um Chrome 43 herum wurde das Verhalten ein wenig geändert. Sie müssen immer noch zu aktivieren Preserve log zu sehen, aber jetzt redirect unter andere Registerkarte angezeigt, wenn geladenes Dokument unter Doc gezeigt wird.

Das verwirrt mich immer, weil ich viele Netzwerkanfragen habe und sie nach dem Typ XHR, Doc, JS usw. filtere. Aber im Falle einer Weiterleitung ist die Registerkarte "Doc" leer, also muss ich raten.