On ne présente plus Mozilla Firefox. Aux cotés d'Internet Explorer et de Chrome, il fait partie des trois navigateurs les plus utilisés sur PC. Il est particulièrement apprécié pour les vastes possibilités de customisation offertes par tous ses plugins, sur lesquelles nous allons d'ailleurs nous allons fortement nous appuyer au cours de ce tutoriel. Ce qui est moins connu, c'est que depuis que Mozilla a commencé à sortir une nouvelle version de Firefox environ toutes les six semaines, chaque nouvelle version entrainant l'arrêt du support de la version précédente, ils ont également mis en place à destination des entreprises et des universités une édition à longue durée de support, Mozilla Firefox ESR, qui reçoit des mise à jour de sécurité régulières, mais qui reste maintenue un peu plus d'un an.

Les avantages sont multiples, puisqu'il n'y a plus besoin de passer toutes les six semaines par un processus de mise à jour, qui va impliquer de mettre également à jour tous les plugins, en courant le risque que certains de ceux-ci ne supportent pas encore la dernière version de Firefox, ce qui conduirait à une dégradation de vos possibilités de test. En outre, si vous êtes plusieurs dans votre équipe à mener conjointement des tests similaires il vous sera beaucoup plus aisé d'être certain d'avoir des conditions de test comparables.

Il y a aussi des inconvénients, le plus évident de ceux-ci est que votre version de Firefox ne sera plus la même que celle utilisée par les clients qui eux pour la plupart utiliseront la toute dernière. Dans le cadre de notre problématique d'examen et de test des échanges http entre le navigateur client et le serveur Web, cet inconvénient a peu d'impact, en effet le support du protocole HTTP n'est pas voué à évoluer avec les différente versions des navigateurs. Par contre si vous effectuez également des tests de rendu, vous apprécierez certainement de pouvoir les faire avec la dernière version, auquel cas je vous conseille tout simplement d'installer pluieurs versions de Firefox en parallèle et d'utiliser le gestionnaire de profils pour choisir la ou les versions que vous souhaitez utiliser.

Dans le cadre de ce tutoriel, c'est la version ESR-17.0.x qui a été utilisée, et qui existe aussi en version portable, ce qui vous permettra de l'installer même si vous n'êtes pas administrateur de votre ordinateur, ce qui est souvent le cas dans les entreprises.

Chrome et Firefox possèdent nativement un outil de débogage pour développeurs Web qui leur est intégré, et dont les fonctionnalités rappellent celles de l'extension Firebug que nous évoquerons plus loin. Nous ne nous attarderons pas dessus dans le cadre de ce tutoriel, car ils sont davantage destinés aux développeurs qui veulent optimiser le rendu des pages et déboguer le javascript alors que nous nous intéressons surtout aux échanges avec le serveur. Il était néanmoins bon de les mentionner, dans certains cas (vous êtes en déplacement chez le client, vous testez sur son ordinateur), ils peuvent fournir un début de piste.

Dans Firefox comme dans Chrome, vous pouvez accéder facilement aux outils de débogage via le raccourci F12.

I.2.a. Outils de développement de Chrome▲

Chrome a été pionnier dans la mise en disposition des développeurs d'un outil de débogage intégré, Firefox ne l'a imité qu'assez récemment. Comme vous pouvez le voir, on peut notamment observer l'ensemble des requêtes exécutées au chargement d'une page et les cookies envoyés. L'outil proposé par Chrome est très sympathique pour déboguer une page web, mais lorsqu'on souhaite l'utiliser exclusivement pour analyser le traffic http, il n'est pas très pratique. Pensez à cliquer sur l'icône en forme de disque plein en bas à gauche pour que l'historique des requêtes soit conservé lorsque vous naviguez d'une page à l'autre.

I.2.b. Outils de développement de Firefox▲

Déjà un peu plus pratique, l'outil intégré à Firefox fait énormément penser à Firebug et HttpFox dont nous reparlerons très prochainement. Il est suffisant pour observer facilement l'ensemble des requêtes envoyées au cours de la navigation. Il n'est à notre connaissance pas très utilisé d'une part à cause de sa relative jeunesse, et d'autre part parce que d'autres extensions Firefox plus spécialisées dans chaque domaine permettent d'avoir davantage d'informations de façon plus ergonomique. Cependant l'essentiel est là.

Firebug est la Rolls des outils de débogage des pages web, bien connue des développeurs Javascript et CSS. Il existe de nombreux plugins qui permettent de le spécialiser sur un type de débogage donné. Dans notre cas il peut aussi s'avérer utile pour analyser les trames http. Pensez à cliquer le bouton "persisant" pour conserver l'historique des appels en passant d'une page à l'autre.

HttpFox est le plugin que nous vous recommandons pour effectuer vos débogages. Comparativement aux autres plugins, il apporte une interface peu chargée qui se concentre sur l'essentiel, mais qui le fait bien. On appréciera la coloration des requêtes en fonction de leur type, qui permet de trouver rapidement les requêtes qui nous intéressent et en particulier les redirections. Son point faible est qu'il capture absolument tout ce qui passe sur votre navigateur: si vous avez un onglet qui se rafraichit automatiquement à intervalles réguliers, vous verrez passer les trames. Cela dit dans certains cas de figure cette particularité est une grande force, car il est l'un des rares plugins à le permettre.

L'export des trames observées vers un tableur peut se faire assez facilement via un clic droit, ce qui peut constituer une solution de dépannage lorsque l'on veut aider un interlocuteur distant à analyser ce qui se passe dans son navigateur.

Tamper Data permet également d'observer l'ensemble des trames http émises par le navigateur, mais ce n'est pas son principal intérêt. Ce qui fait son point fort, c'est qu'il est possible d'intercepter et de modifier les requêtes. Exemple, vous remplissez un formulaire, vous cliquez sur le bouton de validation, et là au lieu que la requête soit directement envoyée, elle va être interceptée via Tamper Data, où vous pourrez l'examiner et la modifier.

C'est particulièrement utile lorsque vous déboguez un protocole basé sur des cookies et que vous souhaitez tester des cas de figures non directement reproductibles de manière classique: au moment d'envoyer une requête vers votre serveur, altérez là, ajoutez ou supprimez les cookies requis par le protocole dans le cas que vous souhaitez reproduire, puis laissez la continuer sa route vers le serveur. Par exemple sur la capture d'écran nous avons ajouté pour l'exemple le cookie Toto.

Dans le même ordre d'idée, vous pouvez également modifier les headers de la requête, c'est particulièrement utile lorsque dans votre environnement de prod il y a des équipement réseau qui enrichissent les headers, et que vous souhaitez reproduire ce comportement dans votre environnement de développement.

L'auteur de Tamper Data ne fournit pas d'icône permettant son intégration facile dans la navigateur, mais vous pouvez y accéder via le menu ou installer l'extension complémentaire Tamper Data Icon Redux qui remplit ce role. Attention l'icone ne sera pas ajoutée automatiquement dans vos barres d'outil, c'est à vous qu'il revient de faire un clic droit sur une barre d'outil, de choisir "¨Personnaliser..." et de glisser-déposer à partir de la fenêtre qui s'affiche les boutons correspondant à vos extensions vers vos barres d'outils (vous pouvez aussi en profiter pour faire le ménage).

Si vous désirez que votre serveur internet adopte un comportement différent en fonction du navigateur qui s'y connecte, vous aurez besoin de User Agent Switcher. Cette extension qui malheureusement ne fonctionne pas sur les versions 17 à 22 de Firefox à cause d'un bogue est très pratique car elle permet de faire passer Firefox pour un autre navigateur, afin d'observer le changement de comportement du serveur. Il n'y a pas beaucoup de types de navigateurs intégrés de base dans l'extension, mais il est possible d'en ajouter facilement par import depuis un fichier XML.

Foxy Proxy n'est pas une extension directement liée au débogage, mais nous avons jugé bon de la mentionner tout de même, car elle s'avère extrêmement pratique lorsque le débogage est effectué sur divers environnements, par exemple en prod, pré-prod et développement. Très facile à configurer, elle vous permettra de basculer de l'un à l'autre en un clic.

Wireshark est un logiciel multi-plateforme qui permet de visualiser au plus bas niveau l'ensemble des requêtes qui transitent sur le réseau. Très complet, il est également très complexe, en particulier pour un novice en protocoles réseau. Pourtant, dans le cadre de protocoles ne s'appuyant pas que sur le http, ou lorsque vous avez besoin de savoir quelles sont les données qui transitent vraiment sur le réseau, il fait partie des outils incontournables. Ceux qui effectuent leur débogage client-serveur sur le même ordinateur apprécieront aussi de savoir comment Capturer le localhost dans WireShark.

TcpView est un logiciel Windows qui permet de visualiser aisément l'ensemble des connexions TCP actives sur votre ordinateur.

Si vous travaillez sous Linux, il existe de nombreuses alternatives en ligne de commande comme par exemple nmap.

Dans de rares cas, lorsque ce que vous voyez depuis votre réseau d'entreprise est différent des captures d'écran de l'un de vos interlocuteurs, il peut être utile de passer par un proxy gratuit pour visualiser la page internet dans les mêmes conditions que lui. Vous trouverez aisément des proxies en cherchant sur le net. La plupart sont assez limités en fonctionnalités, mais le résultat peut suffir pour vous permettre de controler par exemple que tous les fichiers javascript se sont chargés correctement.

Dans la catégorie lien utile à avoir sous la main, celui-ci vous permettra d'encoder et de désencoder rapidement des urls, ce qui est particulièrement utile dans le cas de protocoles qui passent une url de redirection en paramètre GET.