Solicitar monitoreo en Chrome

209

En Firefox, uso Firebug que me permite ver cada solicitud http que están haciendo mis llamadas ajax. Cambié mi desarrollo a Chrome y hasta ahora me está gustando. Sin embargo, mi única queja es que las herramientas de desarrollador no parecen permitirle ver cada solicitud de ajax. Una vez, el panel de Recursos mostró múltiples solicitudes al mismo recurso, pero solo lo hizo una vez y nunca más.

¿Hay alguna manera de ver de manera confiable cada solicitud http que una página está haciendo a través de javascript desde Chrome?

[Editar: 30/11/09 11:55]

Actualmente, para evitar esto, estoy ejecutando Fiddler al lado de Chrome para ver mis solicitudes, pero si hay una manera de hacerlo desde el navegador, preferiría eso.

ajax google-chrome httprequest Wes P
fuente
2
Tengo el mismo problema: he probado todas las soluciones aquí. No aparece nada en la parte Respuesta de la ventana XHR en las herramientas de desarrollo. Simplemente muestra "Esta solicitud no tiene datos de respuesta disponibles". Si ejecuto el mismo código usando firebug, aparece bien. en la configuración de las herramientas de desarrollo de Cog, he intentado marcar "Log XMLHttpRequest" pero esto no ayudó (el tipo de respuesta es application / json). Tengo que hacer toda la depuración en firebug. Firebug también formatea muy bien el JSON, las herramientas de desarrollo de Chrome no lo hacen si puede hacer que muestre la respuesta (por ejemplo, al no usar ajax).
John Little

Respuestas:

359

Sé que este es un hilo viejo, pero pensé en intervenir.

Chrome actualmente tiene una solución integrada.

  1. Utilizar CTRL+SHIFT+I (o navegue hasta Current Page Control > Developer > Developer Tools. En las versiones más recientes de Chrome, haga clic en el icono de llave inglesa> Herramientas> Herramientas para desarrolladores) para habilitar las Herramientas para desarrolladores.
  2. Desde las herramientas del desarrollador, haga clic en el Network botón. Si aún no lo está, habilítelo para la sesión o siempre.
  3. Haga clic en el "XHR" botón secundario.
  4. Inicia un AJAX call .
  5. Verá que los elementos comienzan a aparecer en la columna izquierda debajo "Resources".
  6. Haga clic en el recurso y hay 2 pestañas que muestran los encabezados y el contenido devuelto.
Phil
fuente
2
Gracias Phil! Había dejado esto a un lado y confiaba principalmente en Fiddler. Pero ese botón XHR es lo que estaba buscando: D
Wes P
Ayer estaba hablando de que si las herramientas de Chrome pudieran hacer esto, sería perfecto, gracias.
Germán Rodríguez el
3
Hola a todos, tratando de encontrar el "sub-botón XHR" Creo que me lo estoy perdiendo, ¿alguien puede decirme dónde está? así es como se ve mi inspector imgur.com/9e6yDcB
David Williams
2
Esto parece suceder solo si una llamada AJAX recibe una respuesta, pero no muestra una solicitud saliente que podría no esperar una respuesta. ¿Alguien sabe cómo habilitar eso?
MoMo
1
Si la página se redirige en la misma ventana, puede usar la casilla 'Conservar registro' en la parte superior de las opciones de la pestaña de red (si no, puede cambiar ese enlace para que se abra en la misma ventana configurando target='_self'). Luego, por ejemplo, puede ver la respuesta del formulario que se envió después de que lo redirige. Asegúrese de notar también el filtro a medida que las respuestas se acumulan en las nuevas cargas de página.
JeremyS
57

La respuesta más actualizada a esto es: se enumeran en el botón 'Red' en las herramientas del desarrollador, ya no en 'Recursos' como solía ser.

Wouter
fuente
55
Ahí es donde está ahora, me llevó a buscar el desbordamiento de la pila para encontrarlo después de la actualización.
Kzqai
42

Actualizar

Chrome cambió la forma de inspeccionar las solicitudes y ahora sugiere usar Catapult Netlog Viewer con los registros exportados desde Chrome: // net-export /

chrome://net-export/

Más información

Versiones antiguas de Chrome

También puede usar este enlace en Chrome para obtener información más detallada que la que hizo el inspector.

chrome://net-internals/#events

Esto muestra el registro de todas las solicitudes del navegador mientras está abierto

Karl Adler
fuente
¿Podrías exportar eso?
Pacerier
14

no sé a partir de qué versión de Chrome está disponible, pero encontré una configuración 'Console - Log XMLHttpRequests' (haciendo clic en el icono en la esquina inferior derecha de las herramientas de desarrollador en Chrome en Mac)

schellmax
fuente
3
Esta es la mejor y más fácil forma de monitorear las solicitudes XHR.
CourtDemone
6

Abra sus DevTools y presione F1 para acceder a la configuración. Busque la sección de la consola y marque la casilla de verificación "Log XMLHttpRequests".

Ahora todas sus solicitudes ajax y otras solicitudes similares se registrarán en la consola.

Prefiero este método porque generalmente me permite ver todo lo que estoy buscando en la consola sin tener que ir a la pestaña de red.

ShaneDaugherty
fuente
4

Podrías usar Fiddler, que es una buena herramienta gratuita.

JoshBerke
fuente
1
Sí, tengo Fiddler, que es lo que estoy usando para hacer esto. Solo busco una forma de hacerlo desde el navegador, ya que es un poco más conveniente.
Wes P
3

Gracias a todas las personas que intentan ayudar en esta publicación.

Tengo ubuntu 13.10 y mi versión de Chrome es 34.0

Para mi situación esto funciona

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

ahora debería ver un nuevo Panel frente a su solicitud 

in this panel select "Response" tab
masoud2011
fuente
1

En el paso 5 de Phil, "Recursos" ya no está disponible en la nueva versión de Chrome. Debe hacer clic en el icono de la página justo al lado de la página Ajax que aparece en el panel inferior con las columnas de Nombre, Método, Estado, ...

Luego, le mostrará más paneles donde encontrará los mensajes de error.

wcb1
fuente
0

También puede hacer clic con el botón derecho en la página del navegador y seleccionar "Inspeccionar elemento" para que aparezcan las herramientas del desarrollador.

https://developer.chrome.com/devtools

BitByteDog
fuente