Anzeigen von HTML-Antwort von Ajax-Aufruf durch Chrome Entwickler-Tools?

Question

Also in meinem Javascript Ich mache einen Ajax-Aufruf zu einem Dienst auf meiner Website. Whoops, etwas fehlschlägt. Kein Problem. Hier ist, was ich in Firefox tun würde:

1. Öffnen Sie die Firebug-Konsole
2. Suchen Sie den fehlerhaften Ajax-Aufruf und klicken Sie auf das Pluszeichen, um weitere Informationen zu sehen.
3. Die Antwort Registerkarte hat den rohen HTML. Wer will das alles lesen? Ich klicken Sie auf die Registerkarte HTML.
4. Ah, die schön formatierte HTML zurück von Django zeigt meine Division durch Null Fehler.

Jetzt ist hier, was ich zur Zeit in Chrome tun:

1. Strg + Shift + J die Developer Tools öffnen
2. Gehen Sie zu Ressourcen
3. Blättern Sie zum Aufruf Ajax und klicken Sie auf
4. Wieder einmal sehe ich raw HTML. Noch nicht will, das alles zu lesen, aber da kein HTML gibt es Tab ich in einen Texteditor kopieren und einfügen.
5. Speichern html-Datei
6. Öffnen HTML-Datei in Browser so dass ich den Fehler HTML zurückgegeben von Django lesen

So auf die Frage. Gibt es trotzdem, die HTML-Antwort von einem Ajax-Aufruf im Browser, ohne zu kopieren und fügen Sie den rohen html in einen Texteditor gemacht zu sehen?

Answer 1

Nein, es gibt derzeit keine Möglichkeit. Wenn Sie Developer Tools goto> Ressourcen> XHR Tab> und klicken Sie auf Ihre Ressource (links) sehen Sie zwei Registerkarten. Die erste ist Headers (die roh) und Inhalte, die auch roh ist.

Answer 2

Nur zur Information, während Firebug Lite hat nicht einen NET-Panel hat, ist es hat hat eine XHR Beobachter-Funktion mit dem gleichen Look and Feel von Firebug. Natürlich ist Firebug Lite sehr begrenzt im Vergleich zu Chrome Developer Tools, aber für bestimmte Aufgaben, wie CSS-Bearbeitung oder XHR Inspektion, tut Firebug Lite den Job sehr gut.

Die aktuelle stabile Version zeigen Ihnen die HTTP-Header, GET und POST-Variablen und der Antworttext. Aber die nächste Version 1.3.1 (die in Kürze veröffentlicht werden) den HTML-Viewer, XML-Viewer und den handlichen JSON-Viewer (für beide Anfrage- und Antwortdaten).

Diese Funktion wird in der nächsten Version 1.3.1b2 aufgenommen werden (wahrscheinlich die letzte Beta-Version für die 1.3.1 Version), aber wenn Sie es sehen wollen jetzt ausgeführt Sie können die Entwickler-Kanal .

Answer 3

Ja, der einfachste Weg ist die Registerkarte Netzwerk in den Developer Tools zu verwenden.

1. Ctrl + Shift + I die Developer Tools zu öffnen (oder die Menüleiste am oberen Rand verwenden: "View -> Entwickler -> Developer Tools")
2. Gehen Sie zu Registerkarte "Netzwerk"
3. Aktualisieren Ihrer aktuelle Seite
4. Blättern Sie zum Ajax-Aufruf auf der linken Seite und klicken Sie auf
5. Das Hauptmenü wird mehrere Registerkarten zeigen (in der Regel Vorschau säumige). Klicken Sie auf „Headers“ und Sie sollten die Anfrage und Antwort-Header-Informationen sehen.

Answer 4

Rechtsklick auf den gewünschten Link in der Konsole Registerkarte in Firebug. Dann mit der rechten Maustaste und offene Antwort auf neue Registerkarte wählen. Sie werden es als HTML sehen.

Answer 5

Da ich die rechte Maustaste bemerkt „Speicher als“ Fähigkeit nicht mehr gibt es auf dem Netzwerk> XHR> Registerkarte Antwort ... Ich habe einen neuen Auto-Hotkey-Skript: (Klicken der mittlere Maustaste auf dem Antworttext)

MButton::
MouseClick, left
ClipSaved := ClipboardAll
Send, ^a^c
sleep, 500
FileName := "C:\Users\David\Desktop\temp_xhr_response.html"
file := FileOpen(FileName, "w")
if !IsObject(file)
{
MsgBox Can't open "%FileName%" for writing.
return
}
StringGetPos, pos, Clipboard, HeadersPreviewResponseCookiesTiming
if pos = -1
{
pos = 0 
}
TestString := SubStr(Clipboard, pos+38)
file.Write(TestString)
file.Close()
Run, open "C:\Users\David\Desktop\temp_xhr_response.html"
Clipboard = %ClipSaved%
sleep, 1000
FileDelete, C:\Users\David\Desktop\temp_xhr_response.html
return

Answer 6

Sie könnten herunterladen autohotkey und schreiben einen schnellen Makro, um die Schritte zu tun, benötigt, um die XHR Antwort in ein, um zu sehen Browser-Fenster ...

Hier ist ein Skript, das ich schrieb in autohotkey dass, wenn Sie drücken Sie die mittlere Maustaste (Mausrad-Taste) im Inneren, Antwort Fenster in Chrome Developer tools> Registerkarte Netzwerk, wird es diese Schritte tun:

1. Rechtsklick ... auf Speichern unter
2. Einfügen Speicherort der Datei in der Datei Aufforderung und drücken Sie die Eingabetaste
3. Öffnen Sie die Datei (verwendet Standardbrowser)

4. Löschen Sie die Datei

   MButton::
   MouseClick, right
   MouseGetPos, xpos, ypos
   xpos := xpos + 5
   ypos := ypos + 5
   MouseMove, xpos, ypos
   MouseClick, left
   Sleep, 500
   ClipSaved := ClipboardAll
   Clipboard := "C:\Users\David\Desktop\temp_xhr_response.html"
   Send, ^v  {Enter}
   Clipboard = %ClipSaved%
   sleep, 500
   Run, open "C:\Users\David\Desktop\temp_xhr_response.html"
   sleep, 1000
   FileDelete, C:\Users\David\Desktop\temp_xhr_response.html
   return
   

Dies sollte Sie halten über til Google ein Update für eine bessere Sicht für HTML-Antworten veröffentlicht. Ich bin nicht mit FF FireBug mehr, es wird unglaublich langsam!