Guarda risposta HTML da Ajax chiamata attraverso gli strumenti di sviluppo di Chrome?

Question

Quindi, a mio javascript sto facendo una chiamata AJAX a un servizio sul mio sito. Ops, qualcosa non riesce. Nessun problema. Ecco quello che farei in Firefox:

1. Aprire la console di Firebug
2. Trova la chiamata Ajax fallito e fare clic sul segno + per avere maggiori informazioni.
3. La scheda di risposta ha il codice HTML grezzo. Chi ha voglia di leggere tutto questo? Clicco sulla scheda HTML.
4. Ah, il codice HTML ben formattata restituito da Django mostra il mio errore di divisione per zero.

Ora, ecco quello che attualmente faccio in Chrome:

1. Ctrl + Maiusc + J per aprire i Developer Tools
2. Vai a Risorse
3. Scorrere fino alla chiamata Ajax e cliccare su
4. Ancora una volta, vedo HTML grezzo. Ancora non si vuole leggere tutto questo, ma dal momento che non v'è una scheda HTML I copiare e incollare in un editor di testo.
5. Salva file html
6. Apri file html in del browser in modo da poter leggere il codice HTML di errore restituito da Django

Quindi, alla questione. Esiste un modo per visualizzare la risposta HTML da una chiamata AJAX reso nel browser senza dover copiare e incollare il codice HTML grezzo ad un editor di testo?

Answer 1

No, non esiste attualmente alcun modo. Quando si goto Strumenti di sviluppo> Risorse> Scheda XHR> e fare clic sul tuo risorsa (a sinistra), si vedono due schede. Il primo è intestazioni (che è crudo) e contenuti, che è crudo pure.

Answer 2

Per vostra informazione, mentre Firebug Lite fa non hanno un pannello di rete, ha hanno una caratteristica XHR osservatore con lo stesso aspetto grafico di Firebug. Naturalmente, Firebug Lite è molto limitata rispetto a Chrome Developer Tools, ma per alcuni compiti specifici come l'editing CSS o ispezione XHR, Firebug Lite fa il lavoro molto bene.

L'attuale versione stabile vi propone i intestazioni HTTP, GET e POST variabili e il testo di risposta. Ma la prossima versione 1.3.1 (che sarà rilasciato a breve) comprende il visualizzatore HTML, visualizzatore XML e JSON lo spettatore a portata di mano (sia per la richiesta e dati di risposta).

Questa funzione sarà inclusa nella prossima versione 1.3.1b2 (probabilmente l'ultima versione beta per la versione 1.3.1), ma se si vuole vedere in esecuzione in questo momento è possibile utilizzare il canale sviluppatore .

Answer 3

Sì, il modo più semplice è quello di utilizzare la scheda di rete in Developer Tools.

1. Ctrl + Shift + I per aprire i Developer Tools (o usare la barra dei menu in alto: "Visualizza -> Developer -> Strumenti di sviluppo")
2. Vai alla "Rete" scheda
3. Aggiorna la pagina corrente
4. Scorrere fino alla chiamata Ajax sulla sinistra e clicca
5. Il menu principale mostrerà diverse schede (di solito inadempiente per l'anteprima). Clicca sul "headers" e si dovrebbe vedere la richiesta e l'intestazione di risposta informazioni.

Answer 4

Fare clic destro sul collegamento richiesto nella scheda Console in Firebug. Quindi fare clic destro e scegliere la risposta aperto in una nuova scheda. Si vedrà come HTML.

Answer 5

Da quando ho notato il tasto destro del mouse "Salva con nome" capacità non c'è più sulla scheda di risposta della rete> XHR> ... ho creato un nuovo script auto-tasto di scelta rapida: (fare clic sul pulsante centrale del mouse sul testo di risposta)

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

Si potrebbe scaricare autohotkey e scrivere un rapido macro di fare i passi necessari per vedere la risposta XHR in un finestra del browser ...

Ecco uno script che ho scritto nel autohotkey che se si preme il pulsante centrale del mouse (pulsante rotellina del mouse) all'interno di quella la finestra di risposta nei tool di sviluppo di Chrome> scheda di rete, lo farà alla seguente procedura:

1. Fare clic destro ... scegliere Salva con nome
2. Incolla posizione del file in cartella stampa pronta e Invio
3. Aprire il browser utilizza (di default) del file

4. Eliminare il file

   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
   

Questo dovrebbe tenere voi sopra fino Google rilascia un aggiornamento per una migliore visualizzazione per le risposte HTML. Non sto usando Firebug di FF più, è diventato incredibilmente lento!