¿Visualiza la respuesta HTML desde la llamada Ajax a través de las herramientas de desarrollo de Chrome?

Question

Así que en mi javascript estoy haciendo una llamada ajax a un servicio en mi sitio web. Vaya, algo falla. No hay problema. Esto es lo que me gustaría hacer en Firefox:

1. Abra la consola de Firebug
2. Encuentra la llamada Ajax fallado y haga clic en el signo + para ver más información.
3. La pestaña de respuesta tiene el HTML sin procesar. ¿Quién quiere leer todo eso? Hago clic en la pestaña HTML.
4. Ah, el HTML muy bien formateado devuelto por Django muestra mi división por error cero.

Ahora aquí es lo que actualmente hago en Chrome:

1. Ctrl + Shift + J para abrir las Herramientas de Desarrollo
2. Ir a Recursos
3. abajo desplazarse a la llamada Ajax y haga clic en
4. Una vez más, veo HTML sin formato. Todavía no quiero leer todo eso, pero como no hay una pestaña HTML, la copio y la pego en un editor de texto.
5. Guardar archivo html
6. Abrir el archivo HTML en el navegador para que pueda leer el código HTML de error devuelto por Django

Así que a la pregunta. ¿Hay alguna forma de ver la respuesta HTML de una llamada Ajax renderizada en el navegador sin tener que copiar y pegar el html en bruto en un editor de texto?

Answer 1

No, actualmente no hay manera. Cuando vaya a Herramientas del desarrollador> Recursos> Pestaña XHR> Y haga clic en su recurso (a la izquierda), verá dos pestañas. El primero son los encabezados (que es en bruto) y el contenido que también está en bruto.

Answer 2

Sólo para su información, mientras que Firebug Lite hace no tienen un panel de red, que hace tienen una característica XHR vigilante con el mismo aspecto y la sensación de Firebug. Por supuesto, Firebug Lite es muy limitado en comparación con las herramientas de desarrollo de Chrome, pero para algunas tareas específicas como la edición CSS o la inspección XHR, Firebug Lite hace el trabajo muy bien.

La versión estable actual muestra los encabezados HTTP, las variables GET y POST, y el texto de respuesta. Pero la próxima versión 1.3.1 (que se lanzará próximamente) incluye el visor HTML, el visor XML y el práctico visor JSON (para los datos tanto de solicitud como de respuesta).

Esta característica se incluirá en la próxima versión 1.3.1b2 (probablemente la última versión beta para la versión 1.3.1), pero si desea verla ejecutándose ahora, puede usar el developer channel.

Answer 3

Sí, la manera más fácil es utilizar la pestaña Red en las Herramientas del desarrollador.

1. Ctrl + Shift + I para abrir las herramientas de desarrollo (o utilice la barra de menú en la parte superior: "Ver -> Desarrollador -> Herramientas de Desarrollo")
2. Ir a la pestaña "Red"
3. Actualizar su página actual
4. Desplácese hacia abajo hasta la llamada Ajax a la izquierda y haga clic en
5. El menú principal mostrará varias pestañas (generalmente predeterminadas para Vista previa). Haga clic en "Encabezados" y debería ver la información del encabezado de Solicitud y respuesta.

Answer 4

Se puede descargar autohotkey y escribir una macro rápido de hacer los pasos necesarios para ver la respuesta XHR en una ventana del navegador ...

Aquí hay un guión que escribí en autohotkey que si se pulsa el botón central del ratón (botón rueda del ratón) dentro de esa ventana de respuesta en las herramientas de desarrollo de Chrome> ficha Red, que va a hacer estos pasos:

1. clic derecho ... haga clic en guardar como archivo
2. Pega ubicación en la línea de archivo y pulse Intro
3. Abrir el archivo (utiliza el navegador predeterminado)

4. Eliminar el archivo

   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 
   

Esto debería abrazarte hasta que Google lanza una actualización para una mejor visualización de las respuestas HTML. Ya no estoy usando el FireBug de FF, ¡se ha vuelto increíblemente lento!

Answer 5

Como noté que la capacidad de "Guardar como" del botón derecho ya no está en la pestaña Red> XHR> respuesta ... Creé una nueva secuencia de comandos automática: (haga clic con el botón central del mouse en el texto de respuesta)

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

Haga clic derecho en el enlace solicitado en la pestaña de la consola en firebug. Luego haz clic con el botón derecho y elige abrir la respuesta en una nueva pestaña. Lo verá como HTML.