Verwendung des Chrome-Netzwerkdebuggers mit Weiterleitungen

379

Der Chrome-Netzwerk-Debugger bietet mir einen hervorragenden Überblick über alle für eine Seite geladenen HTTP-Ressourcen. Die Liste wird jedoch gelöscht, wenn eine neue HTML-Seite der obersten Ebene geladen wird. Dies macht es sehr schwierig, Seiten zu debuggen, die aus dem einen oder anderen Grund automatisch neu geladen werden (Ausführen eines Skripts oder 300 Antworten).

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

Oder kann ich Chrome irgendwie zwingen, vor dem Laden einer neuen Seite anzuhalten, wenn ich die Seite, die ich debuggen möchte und die die Umleitung durchführt, nicht kontrolliere? Es ist Teil eines OpenID-Tanzes, der schief geht. Die Kombination von SSL und Anmeldeinformationen macht das Debuggen mit Befehlszeilentools äußerst schwierig.

http google-chrome google-chrome-devtools

— Leopd
quelle

Wie hat dieses Duplikat mehr Upvotes erhalten als das, das 1 Monat zuvor veröffentlicht wurde? stackoverflow.com/q/10703944/632951

— Pacerier

6

@Pacerier Der Link, den Sie verlinkt haben, scheint nicht von Ihnen gepostet worden zu sein, aber es ist wahrscheinlich, dass der Titel nicht "Chrome" enthält. Wenn Leute nach etwas suchen, das mit Chrome zu tun hat, enthält ihre Suche normalerweise das Schlüsselwort Chrome. "Google Developer Tools" ist unglaublich vieldeutig.

— Joel Mellon

gist.github.com/InstanceOfMichael/f6a509b84fe82a718816

— Diosney

527

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

Strom (≥ v32)

Oben auf der Registerkarte "Netzwerk" von DevTools befindet sich ein Kontrollkästchen zum Aktivieren der Funktion "Protokoll beibehalten". Wenn diese Option aktiviert ist, bleibt das Netzwerkprotokoll beim Laden der Seite erhalten.

Registerkarte "Chrome v33 DevTools-Netzwerk": Protokoll beibehalten

Der kleine rote Punkt links dient nun dazu, die Netzwerkanmeldung vollständig ein- und auszuschalten.

ältere Versionen

In älteren Versionen von Chrome (v21 hier) befindet sich in der Fußzeile der Registerkarte "Netzwerk" ein kleiner, anklickbarer roter Punkt.

Registerkarte "Chrome v22 DevTools-Netzwerk": Protokoll bei Navigation beibehalten

Wenn Sie mit der Maus darüber fahren, wird angezeigt, dass bei Aktivierung "Protokoll bei Navigation beibehalten" angezeigt wird. Es hält das Versprechen.

— bfncs
quelle

1

In Version 32 ist es immer noch vorhanden, wurde jedoch an den oberen Rand des Netzwerkbereichs verschoben.

— Daniel Alexiuc

4

Eigentlich ist es jetzt oben, heißt aber "Protokoll beibehalten" und ist ein Kontrollkästchen. Verwirrenderweise gibt es immer noch ein rotes Aufzeichnungssymbol, aber das ist nur, ob Sie sich überhaupt anmelden möchten.

— Thanatos

1

Vielen Dank, dass Sie die Änderung kommentiert haben. Ich habe die Antwort gerade entsprechend aktualisiert.

— Bfncs

@ruben, die Oberfläche sieht zwar jetzt etwas anders aus, aber es gibt immer noch ein Kontrollkästchen mit der Bezeichnung "Protokoll beibehalten

— bfncs

14

@ rubenlop88 Stellen Sie sicher, dass Sie nicht nach Dokumenten filtern , da diese sonst dort nicht bestehen bleiben. Sie können sie speziell auf der Registerkarte Andere überprüfen .

— Alex

173

Ich kenne keine Möglichkeit, Chrome zu zwingen, den Netzwerk-Debugger nicht zu löschen, aber dies könnte das erreichen, wonach Sie suchen:

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

Dadurch wird Chrome angehalten, bevor die neue Seite geladen wird, indem ein Haltepunkt erreicht wird.

— Matt York
quelle

55

Dies war nicht die richtige Antwort auf die Frage, aber es ist genau das, wonach ich suche. Vielen Dank.

— isaaclw

2

Das ist so schlau. Ich bin hierher gekommen, um nach einer Lösung für "Pause vor Umleitung" zu suchen, und hier ist sie. Die akzeptierte Antwort ist leichter zu merken, aber das ist radikal.

— Joel Mellon

19

Dies ist äußerst nützlich, da Chrome den Serverantworttext nicht anzeigt, wenn der Browser direkt nach Erhalt der Antwort umleitet.

— Kristóf Dombi

23

Aktualisieren Sie einfach die Antwort von @bfncs

Ich denke, um Chrome 43 herum wurde das Verhalten ein wenig geändert. Sie müssen weiterhin das Protokoll beibehalten aktivieren, um es anzuzeigen. Die Umleitung wird jetzt auf der Registerkarte Andere angezeigt, wenn das geladene Dokument unter Dokument angezeigt wird.

Das verwirrt mich immer wieder, da ich viele Netzwerkanforderungen habe und diese nach Typ XHR, Doc, JS usw. filtere. Im Falle einer Umleitung ist die Registerkarte Doc jedoch leer, sodass ich raten muss.

— sf
quelle

1

Du bist der Held, den ich gesucht habe!

— Matthew Haworth

23

Eine weitere großartige Lösung zum Debuggen der Netzwerkaufrufe vor dem Umleiten auf andere Seiten ist die Auswahl des beforeunloadEreignisunterbrechungspunkts

Auf diese Weise stellen Sie sicher, dass der Datenfluss unterbrochen wird, bevor er auf eine andere Seite umgeleitet wird. Auf diese Weise sind alle Netzwerkanrufe, Netzwerkdaten und Konsolenprotokolle noch vorhanden.

Diese Lösung eignet sich am besten, wenn Sie überprüfen möchten, wie die Anrufe beantwortet werden

PS: Sie können auch XHR-Haltepunkte verwenden, wenn Sie direkt vor einem bestimmten Anruf oder einem Anruf anhalten möchten (siehe Bildbeispiel).

— Ofear
quelle

2

Das ist toll. Mit dem loadEreignis können wir am Anfang anhalten und den Haltepunkt leicht einstellen. Vielen Dank!

— LeOn - Han Li