web-dev-qa-db-fra.com

Comment utiliser le débogueur de réseau de Chrome avec des redirections

Le débogueur de réseau Chrome me donne une excellente vue de toutes les ressources HTTP chargées pour une page. Mais cela efface la liste chaque fois qu'une nouvelle page HTML de niveau supérieur est chargée. Cela rend très difficile le débogage des pages qui se rechargent automatiquement pour une raison ou une autre (script en cours d'exécution ou 300 réponses).

Puis-je dire à Chrome de ne pas effacer le débogueur de réseau lorsqu'une nouvelle page de niveau supérieur est chargée? Ou puis-je revenir en arrière et regarder les ressources réseau de la page précédente?

Ou puis-je forcer d'une manière ou d'une autre Chrome à mettre en pause avant de charger une nouvelle page lorsque je ne contrôle pas la page que j'essaie de déboguer et effectuant la redirection? Cela fait partie d'une danse OpenID qui tourne mal, alors la combinaison de SSL et des informations d'identification rend le débogage extrêmement difficile avec des outils en ligne de commande.

334
Leopd

Cela a changé depuis la v32, merci à @Daniel Alexiuc & @Thanatos pour leurs commentaires.


actuel (≥ v32)

En haut de l'onglet "Réseau" de DevTools, une case à cocher permet d'activer la fonctionnalité "Conserver le journal". Si cette case est cochée, le journal réseau est conservé au chargement de la page.

Chrome v33 DevTools Network Tab: Preserve Log

Le petit point rouge à gauche a maintenant pour but d'activer et de désactiver complètement la journalisation sur le réseau.


Anciennes versions

Dans les anciennes versions de Chrome (v21 ici), il existe un petit point rouge cliquable dans le pied de page de l'onglet "Réseau".

Chrome v22 DevTools Network Tab: Preserve Log Upon Navigation

Si vous la survolez, elle vous dira qu’elle sera "Conserver la journalisation sur la navigation" lorsqu’elle sera activée. C'est la promesse.

472
bfncs

Je ne connais aucun moyen de forcer Chrome à ne pas effacer le débogueur de réseau, mais cela pourrait permettre d'obtenir ce que vous cherchez:

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

Cela mettra en pause chrome avant de charger la nouvelle page en appuyant sur un point d'arrêt.

153
Matt York

Juste mise à jour de @bfncs answer

Je pense autour de Chrome 43 le comportement a été un peu changé. Vous devez toujours activer l'option Conserver le journal pour voir, mais la redirection est maintenant affichée sous l'onglet Autre, lorsque le document chargé est affiché sous Doc.

Cela me perturbe toujours, car j'ai beaucoup de requêtes de réseaux et que je filtre par type XHR, Doc, JS, etc. Mais en cas de redirection, l'onglet Doc est vide, je dois donc deviner.

22
s-f

Une autre solution intéressante pour déboguer les appels réseau avant de les rediriger vers d'autres pages consiste à sélectionner le point de rupture d'événement beforeunload.

De cette façon, vous vous assurez de couper le flux juste avant de le rediriger vers une autre page, ainsi tous les appels réseau, les données réseau et les journaux de la console sont toujours là.

Cette solution est préférable lorsque vous souhaitez vérifier quelle est la réponse des appels

Chrome beforeunload event break point

P.S: Vous pouvez également utiliser des points de rupture XHR si vous souhaitez vous arrêter juste avant un appel spécifique ou un appel quelconque (voir exemple image) XHR break point

16
Ofear