Anforderungsüberwachung in Chrome

208

In Firefox verwende ich Firebug, mit dem ich jede http-Anfrage anzeigen kann, die meine Ajax-Aufrufe tätigen. Ich habe meine Entwicklung auf Chrome umgestellt und mag sie bisher. Meine einzige Beschwerde ist jedoch, dass Sie mit den Entwicklertools anscheinend nicht jede Ajax-Anfrage anzeigen können. Ich habe es einmal erlebt, als im Ressourcenbedienfeld mehrere Anforderungen an dieselbe Ressource angezeigt wurden, aber es wurde nur einmal und nie wieder ausgeführt.

Gibt es eine Möglichkeit, jede http-Anfrage, die eine Seite über Javascript in Chrome stellt, zuverlässig anzuzeigen?

[Bearbeiten: 30.11.09 11:55]

Um dies zu umgehen, führe ich derzeit Fiddler neben Chrome aus, um meine Anforderungen anzuzeigen. Wenn es jedoch eine Möglichkeit gibt, dies über den Browser zu tun, würde ich das vorziehen.

Wes P.
quelle
2
Ich habe das gleiche Problem - habe hier alle Lösungen ausprobiert. Im Antwortteil des XHR-Fensters in den Entwicklertools wird nichts angezeigt. Es wird nur "Diese Anfrage hat keine Antwortdaten verfügbar" angezeigt. Wenn ich den gleichen Code mit Firebug ausführe, wird er gut angezeigt. In den Einstellungen der Cog Dev Tools habe ich versucht, "Log XMLHttpRequest" anzukreuzen, aber dies hat nicht geholfen (Antworttyp ist application / json). Ich muss alles in Firebug debuggen. Firebug formatiert den JSON auch gut, Chrome Dev Tools nicht, wenn Sie ihn dazu bringen können, die Antwort anzuzeigen (z. B. indem Sie Ajax nicht verwenden).
John Little

Antworten:

359

Ich weiß, dass dies ein alter Thread ist, aber ich dachte, ich würde mich einschalten.

In Chrome ist derzeit eine Lösung integriert.

  1. Verwenden Sie CTRL+SHIFT+I(oder navigieren Sie zu Current Page Control > Developer > Developer Tools. Klicken Sie in den neueren Versionen von Chrome auf das Schraubenschlüsselsymbol> Extras> Entwicklertools.), Um die Entwicklertools zu aktivieren.
  2. Klicken Sie in den Entwicklertools auf die NetworkSchaltfläche. Wenn dies noch nicht geschehen ist, aktivieren Sie es für die Sitzung oder immer.
  3. Klicken Sie auf die "XHR"Unterschaltfläche.
  4. Initiieren Sie eine AJAX call.
  5. In der linken Spalte unter werden Elemente angezeigt "Resources".
  6. Klicken Sie auf die Ressource und es gibt 2 Registerkarten mit den Überschriften und dem zurückgegebenen Inhalt.
Phil
quelle
2
Danke Phil! Ich hatte das beiseite gelegt und mich hauptsächlich auf Fiddler verlassen. Aber dieser XHR-Knopf ist das, wonach ich gesucht habe: D
Wes P
erst gestern habe ich darüber gesprochen, dass es perfekt wäre, wenn Chromwerkzeuge dies könnten, danke.
Germán Rodríguez
3
Hallo zusammen, versuche den "XHR-Sub-Button" zu finden. Ich glaube, ich vermisse ihn. Kann mir jemand sagen, wo das ist? So sieht mein Inspektor aus imgur.com/9e6yDcB
David Williams
2
Dies scheint nur zu passieren, wenn ein AJAX-Anruf eine Antwort erhält, zeigt Ihnen jedoch keine ausgehende Anfrage an, die möglicherweise keine Antwort erwartet. Weiß jemand, wie man das ermöglicht?
MoMo
1
Wenn die Seite im selben Fenster umgeleitet wird, können Sie das Kontrollkästchen "Protokoll beibehalten" oben auf der Registerkarte "Netzwerk" verwenden (andernfalls können Sie diesen Link so ändern, dass er im selben Fenster geöffnet wird, indem Sie ihn festlegen target='_self'). Dann können Sie beispielsweise die Antwort aus dem Formular sehen, das gesendet wurde, nachdem es Sie umgeleitet hat. Beachten Sie auch den Filter, wenn sich die Antworten beim Laden neuer Seiten häufen.
JeremyS
57

Die aktuellste Antwort darauf lautet: Sie werden in den Entwicklertools unter der Schaltfläche "Netzwerk" aufgeführt, nicht mehr wie früher unter "Ressourcen".

Wouter
quelle
5
Dort habe ich jetzt nach einem Stapelüberlauf gesucht, um ihn nach dem Upgrade zu finden.
Kzqai
42

Aktualisieren

Chrome hat die Überprüfung von Anforderungen geändert und schlägt nun vor, den Catapult Netlog Viewer für die aus Chrome exportierten Protokolle zu verwenden : // net-export /

chrome://net-export/

Mehr Info

Alte Chrome-Versionen

Sie können diesen Link auch in Chrome verwenden, um detailliertere Informationen zu erhalten, als dies der Inspektor getan hat.

chrome://net-internals/#events

Dies zeigt das Protokoll aller Anforderungen des Browsers im geöffneten Zustand

Karl Adler
quelle
Könnten Sie das exportieren?
Pacerier
14

Ich weiß nicht, ab welcher Chrome-Version dies verfügbar ist, aber ich habe eine Einstellung 'Konsole - XMLHttpRequests protokollieren' gefunden (Klicken Sie auf das Symbol in der unteren rechten Ecke der Entwicklertools in Chrome auf dem Mac).

schellmax
quelle
3
Dies ist der einfachste und beste Weg, um XHR-Anforderungen zu überwachen.
CourtDemone
6

Öffnen Sie Ihre DevTools und drücken Sie F1, um auf die Einstellungen zuzugreifen. Suchen Sie nach dem Konsolenabschnitt und aktivieren Sie das Kontrollkästchen für "XMLHttpRequests protokollieren".

Jetzt werden alle Ihre Ajax- und ähnlichen Anforderungen in der Konsole protokolliert.

Ich bevorzuge diese Methode, da ich normalerweise alles, was ich suche, in der Konsole sehen kann, ohne zur Registerkarte "Netzwerk" wechseln zu müssen.

ShaneDaugherty
quelle
4

Sie könnten Fiddler verwenden , ein gutes kostenloses Tool.

JoshBerke
quelle
1
Ja, ich habe Fiddler, mit dem ich das mache. Ich suche nur nach einer Möglichkeit, dies im Browser zu tun, da es etwas bequemer ist.
Wes P
3

Vielen Dank an alle, die versuchen, in diesem Beitrag zu helfen

Ich habe Ubuntu 13.10 und meine Chrome-Version ist 34.0

Für meine Situation funktioniert das

1.open developer tools in chrome(or use right click on your page and then select inspect element)
2.go to "Network" tab
3.find your ajax request in "Name Path" column 
4.click on the specific ajax link

Jetzt sollten Sie ein neues Panel vor Ihrer Anfrage sehen

in this panel select "Response" tab
masoud2011
quelle
1

In Schritt 5 von Phil ist "Ressourcen" in der neuen Version von Chrome nicht mehr verfügbar. Sie müssen auf das Seitensymbol direkt neben der Ajax-Seite klicken, die im unteren Bereich mit den Spalten Name, Methode, Status, ... aufgeführt ist.

Dann werden Ihnen weitere Bereiche angezeigt, in denen Sie die Fehlermeldungen finden.

wcb1
quelle
0

Sie können auch einfach mit der rechten Maustaste auf die Seite im Browser klicken und "Element überprüfen" auswählen, um die Entwicklertools aufzurufen.

https://developer.chrome.com/devtools

BitByteDog
quelle