Cómo usar el depurador de red de Chrome con redireccionamientos

379

El depurador de red Chrome me da una excelente vista de todos los recursos HTTP cargados para una página. Pero borra la lista cada vez que se carga una nueva página HTML de nivel superior. Esto hace que sea muy difícil depurar páginas que se recargan automáticamente por una razón u otra (ejecución de script o 300 respuestas).

¿Puedo decirle a Chrome que no borre el depurador de red cuando se carga una nueva página de nivel superior? ¿O puedo volver y mirar los recursos de red de la página anterior?

¿O puedo forzar de alguna manera a Chrome a pausar antes de cargar una nueva página cuando no controlo la página que estoy tratando de depurar que está haciendo la redirección? Es parte de un baile de OpenID que va mal, por lo que la combinación de SSL y credenciales hace que sea extremadamente difícil depurar con herramientas de línea de comandos.

Leopd
fuente
¿Cómo obtuvo este duplicado más votos a favor que el publicado 1 mes antes? stackoverflow.com/q/10703944/632951
Pacerier
66
@Pacerier El que vinculaste no parece haber sido publicado por ti, pero es probable que el razonamiento no tenga "Chrome" en el título. Cuando las personas buscan algo relacionado con Chrome, su búsqueda generalmente incluye la palabra clave Chrome. "Google Developer Tools" es increíblemente ambiguo.
Joel Mellon

Respuestas:

527

Esto ha cambiado desde la v32, gracias a @Daniel Alexiuc y @Thanatos por sus comentarios.


Corriente (≥ v32)

En la parte superior de la pestaña "Red" de DevTools, hay una casilla de verificación para activar la funcionalidad "Conservar registro". Si está marcado, el registro de red se conserva al cargar la página.

Ficha de red de Chrome v33 DevTools: conservar registro

El pequeño punto rojo a la izquierda ahora tiene el propósito de activar y desactivar por completo el inicio de sesión en la red.


versiones anteriores

En versiones anteriores de Chrome (v21 aquí), hay un pequeño punto rojo en el pie de página de la pestaña "Red".

Ficha de red de Chrome v22 DevTools: preservar el registro al navegar

Si pasa el cursor sobre él, le dirá que "Conservará el registro al navegar" cuando se active. Sostiene la promesa.

bfncs
fuente
1
En la versión 32 todavía está allí, pero se ha movido a la parte superior del panel de red.
Daniel Alexiuc
44
En realidad, ahora está en la parte superior, pero se llama "Conservar registro", y es una casilla de verificación. Confusamente, todavía hay un ícono de registro rojo, pero eso es solo para iniciar sesión.
Thanatos
1
Gracias por comentar sobre el cambio, acabo de actualizar la respuesta en consecuencia.
bfncs
@ruben, la interfaz ahora se ve un poco diferente, pero todavía hay una casilla de verificación etiquetada "Conservar registro" en la parte superior de la pestaña de red: i.imgur.com/fhSDYSz.png
bfncs
14
@ rubenlop88 Asegúrese de que no está filtrando documentos , de lo contrario no persistirán allí. Puede verificarlos específicamente en la pestaña Otros .
alex
173

No conozco una forma de obligar a Chrome a no borrar el depurador de red, pero esto podría lograr lo que está buscando:

  1. Abre la consola js
  2. window.addEventListener("beforeunload", function() { debugger; }, false)

Esto detendrá Chrome antes de cargar la nueva página al alcanzar un punto de interrupción.

Matt York
fuente
55
Esta no era la respuesta correcta para la pregunta, pero en realidad es lo que estoy buscando. Gracias.
isaaclw
2
Esto es muy hábil. Llegué aquí buscando una solución de "pausa antes de redirigir" y aquí está. La respuesta aceptada es más fácil de recordar, pero esto es radical.
Joel Mellon
19
Esto es extremadamente útil, porque Chrome no muestra el cuerpo de respuesta del servidor, si el navegador redirige inmediatamente después de recibir la respuesta.
Kristóf Dombi
23

Solo actualiza la respuesta de @bfncs

Creo que en Chrome 43 el comportamiento cambió un poco. Todavía necesita habilitar Preserve log para ver, pero ahora la redirección se muestra en la pestaña Otros, cuando el documento cargado se muestra en Doc.

Esto siempre me confunde, porque tengo muchas solicitudes de redes y las filtro por tipo XHR, Doc, JS, etc. Pero en caso de redireccionamiento, la pestaña Doc está vacía, así que tengo que adivinar.

sf
fuente
1
¡Eres el héroe que estaba buscando!
Matthew Haworth el
23

Otra gran solución para depurar las llamadas de red antes de redirigir a otras páginas es seleccionar el beforeunloadpunto de interrupción del evento

De esta manera, se asegura de romper el flujo justo antes de redirigirlo a otra página, de esta manera todas las llamadas de red, los datos de red y los registros de consola todavía están allí.

Esta solución es mejor cuando desea verificar cuál es la respuesta de las llamadas

Chrome antes del punto de interrupción del evento de descarga

PD: También puede usar puntos de interrupción XHR si desea detenerse justo antes de una llamada específica o cualquier llamada (ver ejemplo de imagen) Punto de ruptura XHR

Ofear
fuente
2
Esto es genial. Con el loadevento, podemos parar al principio y establecer fácilmente el punto de interrupción. ¡Gracias!
LeOn - Han Li