Surveillance des demandes dans Chrome

209

Dans Firefox, j'utilise Firebug qui me permet de visualiser chaque demande http que mes appels ajax font. J'ai basculé mon développement vers Chrome et je l'aime jusqu'à présent. Ma seule plainte, cependant, est que les outils de développement ne semblent pas vous permettre de visualiser chaque demande ajax. Je l'ai eu une fois où le panneau Ressources a montré plusieurs demandes à la même ressource, mais il ne l'a fait qu'une fois et plus jamais.

Existe-t-il un moyen de voir de manière fiable chaque demande http qu'une page effectue via javascript depuis Chrome?

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

Actuellement, pour contourner ce problème, j'exécute Fiddler à côté de Chrome pour afficher mes demandes, mais s'il existe un moyen de le faire à partir du navigateur, je préférerais cela.

ajax google-chrome httprequest

— Wes P
source

2

J'ai le même problème - j'ai essayé toutes les solutions ici. Rien n'apparaît dans la partie Réponse de la fenêtre XHR dans les outils de développement. Il affiche simplement "Cette demande n'a pas de données de réponse disponibles". Si j'exécute le même code à l'aide de FireBug, cela s'affiche très bien. dans les paramètres des outils de développement cog, j'ai essayé de cocher "Log XMLHttpRequest" mais cela n'a pas aidé (le type de réponse est application / json). Je dois faire tout le débogage dans firebug. Firebug formate également bien le JSON, les outils de développement de chrome ne le font pas si vous pouvez le faire afficher la réponse (par exemple en n'utilisant pas ajax).

— John Little

359

Je sais que c'est un vieux fil mais j'ai pensé que j'allais sonner.

Chrome a actuellement une solution intégrée.

Utilisez CTRL+SHIFT+I(ou accédez à Current Page Control > Developer > Developer Tools. Dans les versions les plus récentes de Chrome, cliquez sur l'icône Clé> Outils> Outils de développeur.) Pour activer les outils de développeur.
Dans les outils de développement, cliquez sur le Networkbouton. Si ce n'est pas déjà fait, activez-le pour la session ou toujours.
Cliquez sur le "XHR"sous-bouton.
Lancer un AJAX call.
Vous verrez des éléments commencer à apparaître dans la colonne de gauche sous "Resources".
Cliquez sur la ressource et il y a 2 onglets affichant les en-têtes et renvoyant le contenu.

— Phil
source

2

Merci Phil! J'avais mis cela de côté et comptais principalement sur Fiddler. Mais ce bouton XHR est ce que je cherchais: D

— Wes P

hier, je parlais que si les outils chromés pouvaient le faire, ce serait parfait, merci.

— Germán Rodríguez

3

Salut à tous, essayez de trouver le "sous-bouton XHR" Je pense qu'il me manque peut-être, quelqu'un peut-il me dire où c'est? voici

— David Williams

2

Cela ne semble se produire que si un appel AJAX obtient une réponse, mais il ne vous montre pas une demande sortante qui pourrait ne pas attendre de réponse. Quelqu'un sait comment activer cela?

— MoMo

1

Si la page redirige sur la même fenêtre, vous pouvez utiliser la case à cocher «Conserver le journal» en haut des options de l'onglet réseau (sinon, vous pouvez modifier ce lien pour l'ouvrir dans la même fenêtre en définissant target='_self'). Ensuite, par exemple, vous pouvez voir la réponse du formulaire qui a été soumis après qu'il vous ait redirigé. Assurez-vous également de remarquer le filtre lorsque les réponses s'accumulent lors du chargement de nouvelles pages.

— JeremyS

57

La réponse la plus récente à cette question est: ils sont répertoriés sous le bouton «Réseau» dans les outils de développement, et non plus sous «Ressources» comme c'était le cas auparavant.

— Wouter
source

5

C'est en effet là où il en est maintenant, m'a amené à chercher le débordement de pile pour le trouver après la mise à niveau.

— Kzqai du

42

Mettre à jour

Chrome a changé la façon d'inspecter les demandes et suggère maintenant d'utiliser la visionneuse Catapult Netlog avec les journaux exportés depuis Chrome: // net-export /

chrome://net-export/

Plus d'informations

Anciennes versions de Chrome

Vous pouvez également utiliser ce lien dans Chrome pour obtenir des informations plus détaillées que l'inspecteur.

chrome://net-internals/#events

Cela montre le journal de toutes les demandes du navigateur lorsqu'il est ouvert

— Karl Adler
source

Pourriez-vous exporter cela?

— Pacerier

14

Je ne sais pas de quelle version Chrome cela est disponible, mais j'ai trouvé un paramètre 'Console - Log XMLHttpRequests' (en cliquant sur l'icône dans le coin inférieur droit des outils de développement dans Chrome sur Mac)

— schellmax
source

3

C'est le moyen le plus simple et le meilleur de surveiller les demandes XHR.

— CourtDemone

6

Ouvrez vos DevTools et appuyez sur F1 pour accéder aux paramètres. Recherchez la section console et cochez la case "Log XMLHttpRequests".

Maintenant, tous vos ajax et autres requêtes similaires seront enregistrés dans la console.

Je préfère cette méthode car elle me permet généralement de voir tout ce que je recherche dans la console sans avoir à aller dans l'onglet réseau.

— ShaneDaugherty
source

4

Vous pouvez utiliser Fiddler qui est un bon outil gratuit.

— JoshBerke
source

1

Oui, j'ai Fiddler, c'est ce que j'utilise pour faire ça. Je cherche juste un moyen de le faire à partir du navigateur, car c'est un peu plus pratique.

— Wes P

3

Merci à toutes les personnes qui essaient d'aider dans ce post

J'ai Ubuntu 13.10 et ma version Chrome est 34.0

Pour ma situation, cela fonctionne

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

vous devriez maintenant voir un nouveau panneau devant votre demande

in this panel select "Response" tab

— masoud2011
source

1

Dans l'étape 5 de Phil, "Ressources" n'est plus disponible dans la nouvelle version de Chrome. Vous devez cliquer sur l'icône de page juste à côté de la page Ajax répertoriée dans le volet inférieur avec les colonnes Nom, Méthode, Statut, ...

Ensuite, il vous montrera plus de panneaux où vous trouverez les messages d'erreur.

— wcb1
source

0

Vous pouvez également cliquer avec le bouton droit sur la page dans le navigateur et sélectionner "Inspecter l'élément" pour afficher les outils de développement.

https://developer.chrome.com/devtools

— BitByteDog
source