Le blog des équipes…

Afin de pouvoir intervenir rapidement dans la résolution d’erreurs, il est important d’avoir les bons outils.
Voici un cas d’erreur rencontré récemment :

Contexte
Une page de listing de données (contenant un moteur permettant de filtrer les données affichées) fonctionne correctement sous Firefox, mais est très lente sous IE 7, IE 8 et plante de temps en temps sous IE6.

Intervention
Le problème se produisant seulement sous IE, il était difficile de cerner la cause par le manque d’outils sous IE aussi précis que Firebug sous Firefox.
En effet avec Firebug, il est possible de voir le détail de l’exécution du JavaScript.
La première action fut donc de rechercher des outils pour permettre l’analyse du problème sous IE :

• Fiddler : Fiddler est une sorte de proxy, qui permet de voir tous les échanges qui sont fait entre le navigateur et le serveur (fonctionne pour tous les navigateurs)
• DynaTrace: Permet de visualiser toute l’exécution du code JavaScript sous IE

Dans notre cas, voici ce que l’on pouvait voir avec Fiddler lorsqu’on choisissait un critère :

Il est indiqué que pour un critère du moteur choisi, 6 requêtes HTTP sont envoyées vers le serveur. Cela ne se produit que sous IE (toute version), sous firefox (ou autre navigateur) on a bien  une seule requête HTTP.

Nous constatons des effets similaires avec l’outil DynaTrace :

6 appels ajax sont remontés :
 

En regardant le détail des requêtes Ajax qui sont faites, on peut voir qu’il s’agit de la même requête à chaque fois :

Avec DynaTrace, il est possible de voir tout le déroulement du JavaScript.

La démarche fut donc de regarder ce qui était à l’origine des appels Ajax générés.
Ci-dessous la même vue que précédemment, mais en filtrant sur la fonction Ajax de jquery:

Dans BackTraces, il est possible de voir les fonctions qui sont à l’origine de l’appel.
On peut voir qu’il y a :
- OnClickList : ce qui est normal, c’est lorsqu’on clique la première fois sur le critère.
- OnChangeCheckbox : ce qui n’est pas normal, cette fonction devrait être appelée seulement lorsque l’utilisateur clique sur une case à cocher. Visiblement lorsque le JavaScript traite le résultat renvoyé par le premier appel AJAX, IE mets à jour les cases à cocher, ce qui déclenche la fonction OnChangeCheckbox.

Résolution
Il faut modifier le code JavaScript pour que la fonction OnChangeCheckbox soit appelée différemment.
La page de listing peut à présent s’exécuter sous IE sans plantage.