Cédric Bonnot

Parmi les grandes évidences, un site web consomme de la bande passante et celle-ci bien baisse de manière constante, elle n'est pas infinie. Bien entendu il existe de nombreuses techniques pour en réduire son usage : compression, cache et meilleure gestion des appels serveurs en sont un exemple.
Malheureusement nous ne sommes pas toujours maitre de l'utilisation de la bande passante, particulièrement si l'on utilise des composants tiers ou la "technologie" AJAX.
Mais alors comment vérifier cela ? C'est là qu'un analyseur réseau tel que Fiddler devient indispensable.

A quoi sert Fiddler

Fiddler une fois installé sur un ordinateur client permet d'analyser exactement ce que contiennent (ou pas) les requêtes HTTP envoyées par le client au travers du réseau. Il capture les détails de chaque requête, postback, requête AJAX, ...
Il ne faut pas oublier que le chargement d'une page ne se fait pas en une seule requête mais en plusieurs parties (contenu html, images, fichiers JavaScript et CSS,...)
Fiddler permet de vérifier la manière dont chaque requête est gérée.
Fiddler trouve tout son intérêt avec les requêtes AJAX. En effet les requêtes AJAX étant invisibles à l'utilisateur, sans un outil comme Fiddler il est quasiment impossible de tracer les données échangées entre le serveur et le client.

Première utilisation

Le téléchargement et l’installation sont des plus simple. Une fois installé un bouton est disponible dans la barre de commandes d’Internet Explorer.

Pour information, Fiddler est compatible avec IE et Firefox. Pour ce dernier il faut configurer son proxy sur l’adresse 127.0.0.1 et le port 8888 (merci à Améthyste pour cette info ;-) )
Un fois lancé, et sa fabuleuse interface apparue ;-) le trafic réseau est immédiatement loggé.

Sur la partie gauche on y retrouve la liste des « Web Sessions »
Un clic sur un des items de cette liste affiche l’écran « performance statistics ». A noter qu’il est possible de sélectionner plusieurs lignes afin d’agréger les résultats.
Cet écran permet de connaitre combien de bytes ont été envoyés et reçus et combien de temps cela a pris. Fiddler fournit une information assez originale puisqu’il est possible de connaitre le temps que cette même session aurait pris à d’autres endroits du monde et avec d’autres types de connexions.
Le lien « Show Chart » permet d’afficher un camembert

Lorsque qu’au moins une ligne est sélectionnée de nombreuses options sont proposées. On y retrouve la possibilité de :
- supprimer un, plusieurs ou tous les éléments.
- Marquer un ou plusieurs éléments avec une couleur différente.
- Enregistrer le ou les Requêtes/Réponses sous différent formats.
- Enregistrer la session sous plusieurs formats, ce qui inclus entres autres le format webtest de VS2005.

Un double clic sur une ligne affiche l’écran « Session Inspector ». Ce dernier ne compose de deux sous écrans. Celui du haut pour la requête et le celui du bas pour la réponse.

Pour chaque écran, on retrouve plusieurs onglets fournissant toutes les informations utiles :
- Header
- Text
- Forms
- Hexadecimal
- Authorization
- Raw
- XML

L’écran du bas (réponse) dispose en plus des onglets :
- Privacy
- Caching
- Image view

Analyse des événements

Chaque ligne de requête est composé de neuf colonnes pouvant être déplacées à souhait.

Les colonnes « Host » et « URL » contiennent les détails concernant le serveur, path et fichier de l’élément demandé. « Result » indique le code retourné par le serveur (ex : 200 - réponse OK et 404 - ressource non trouvée). « Body » contient la taille de la réponse. Cette valeur peut être égale à 0 si l’élément étant présent en cache dans le navigateur.
La colonne « Caching » indique le type de cache éventuellement appliqué à l’élément. « Content Type » donne le format du contenu associé à cette requête comme « text/html », « image/jpeg », « application/x-javascript », etc. On retrouve la valeur de ces deux colonnes dans l’écran « Session Inspector - Response»

Debug avec Fiddler

Une des fonctionnalités vraiment intéressante est la possibilité de créer des requêtes http à la volée. Pour cela il faut choisir l’onglet situé en haut à droite « Request Builder ».

Bien qu’il soit possible de tout saisir à la main, il est plus simple sélectionner une requête existante dans la liste de gauche en la faisant glisser sur la partie de droite. Ensuite libre à vous de modifier son contenu et d’exécuter la requête.

Une autre fonctionnalité est la possibilité de place un point d’arrêt avant que la requête soit envoyée au serveur ou juste après la réception de la réponse. Cela permet de modifier la requête après qu’elle soit générée mais avant son envoi au serveur.

Personnalisation de Fiddler

Pour tous ceux qui souhaite encore plus de fonctionnalités dans Fiddler, il est possible de le personnaliser afin de l’adapter à ses désidératas. Il est par exemple de possible de modifier les couleurs des éléments de la « Session List »
Pour « modifier » Fiddler, il faut utiliser le menu « Rules – Customize Rules… ». Cela ouvre le fichier CustomRules.js. Je vous laisse le découvrir mais pour information, il existe un éditeur spécialisé.

Resources en ligne

Le site Fiddler (http://www.fiddler2.com) met à disposition de nombreux outils et ressources. En voici une courte liste:
• Vidéos de démonstration: http://www.fiddlertool.com/fiddler/help/video/default.asp
• Editeur FiddlerScript: http://www.fiddlertool.com/fiddler/fse.asp
• FiddlerScript Cookbook : http://www.fiddlertool.com/fiddler/dev/scriptsamples.asp
• Etendre Fiddler avec du code personnalisé: http://www.fiddlertool.com/fiddler/dev/
• Fiddler FAQ: http://www.fiddler2.com/fiddler2/faq.asp
• Fiddler sur MSDN: http://msdn.microsoft.com/library/en-us/IETechCol/dnwebgen/IE_Fiddler2.asp
• Fiddler Blog: http://insidehttp.blogspot.com
• Fiddler Forum: http://groups.msn.com/HTTPFiddler/