javascript - ¿Está viendo la respuesta HTML de la llamada Ajax a través de las herramientas de desarrollo de Chrome?

firebug google-chrome-devtools

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 haría en Firefox:

1. Abre la consola firebug
2. Encuentre la llamada Ajax fallida y haga clic en el signo + para ver más información.
3. La pestaña de respuesta tiene el HTML en bruto. ¿Quién quiere leer todo eso? Hago clic en la pestaña HTML.
4. Ah, el bonito formato HTML devuelto por Django muestra mi error de división por cero.

Ahora esto es lo que hago actualmente en Chrome:

1. Ctrl + Shift + J para abrir las Herramientas del desarrollador
2. Ir a Recursos
3. Desplácese hacia abajo hasta la llamada Ajax y haga clic en
4. Una vez más, veo HTML en bruto. Todavía no quiero leer todo eso, pero como no hay una pestaña HTML, copio y pego en un editor de texto.
5. Guardar archivo html
6. Abra el archivo html en el navegador para que pueda leer el error HTML 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

Desde que noté que la capacidad de "guardar como" del botón derecho ya no existe en la pestaña Red> XHR> respuesta ... creé una nueva secuencia de comandos de teclas de acceso directo: (haga clic en el botón central del mouse en el texto de la 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 2

Haga clic derecho en el enlace solicitado en la pestaña de la consola en firebug. Luego haga clic derecho y elija abrir respuesta en una nueva pestaña. Lo verás como HTML.

Answer 3

No, actualmente no hay manera. Cuando acceda a Herramientas de desarrollo> Recursos> Pestaña XHR> Y haga clic en su recurso (a la izquierda), verá dos pestañas. El primero es Encabezados (que es sin formato) y Contenido que también es sin formato.

Answer 4

Puede descargar autohotkey y escribir una macro rápida para realizar los pasos necesarios para ver la respuesta XHR en una ventana del navegador ...

Aquí hay una secuencia de comandos que escribí en autohotkey que si presionas el botón central del mouse (botón de rueda del mouse) dentro de esa ventana de respuesta en la pestaña Herramientas de desarrollador> Red de Chrome, se realizarán estos pasos:

1. Haga clic derecho ... haga clic en guardar como
2. Pegue la ubicación del archivo en la solicitud de archivo y presione Entrar
3. Abre el archivo (usa el navegador predeterminado)

4. Borrar 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 detenerlo hasta que Google lance una actualización para ver mejor las respuestas HTML. Ya no uso FireBug de FF, ¡se ha vuelto increíblemente lento!

Answer 5

Sí, la forma más sencilla es usar la pestaña Red en las Herramientas del desarrollador.

1. Ctrl + Shift + I para abrir las Herramientas del desarrollador (o use la barra de menú en la parte superior: "Ver -> Desarrollador -> Herramientas del desarrollador")
2. Ir a la pestaña "Red"
3. Actualiza tu página actual
4. Desplácese hasta la llamada Ajax a la izquierda y haga clic en
5. El menú principal mostrará varias pestañas (por lo general, el valor predeterminado es Vista previa). Haga clic en "Encabezados" y verá la información del encabezado de Solicitud y Respuesta.

Answer 6

Solo para su información, mientras que Firebug Lite no tiene un panel NETO, tiene una función de observador XHR con el mismo aspecto que Firebug. Por supuesto, Firebug Lite es muy limitado en comparación con Chrome Developer Tools, pero para algunas tareas específicas como la edición de CSS o la inspección XHR, Firebug Lite hace el trabajo muy bien.

La versión estable actual le 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 de solicitud y respuesta).

Esta función se incluirá en la próxima versión 1.3.1b2 (probablemente la última versión beta de la versión 1.3.1), pero si desea verla en ejecución ahora mismo puede usar el canal de desarrolladores .