Arrêter de pleurer pour déboguer votre JavaScript sur IE6

Flattr this!

Ceux qui me suivent sur Twitter savent que j'ai du me livrer à une session de gros débogage sous IE 6 il y a peu. Tout ça à grands coups de jurons divers et variés. Bah ouais sinon c'est pas drôle.

Alors tout d'abord, il existe un outil génial dont je me suis heureusement souvenu l'existence.  Il s'agit de la DebugBar. Une sorte de Firebug pour IE et d'époque en prime. Alors évidement, il est du niveau de IE 6 donc faut pas trop en attendre mais ça reste quand même toujours mieux que :

Erreur JavaScript IE 6

Je ne vous conseille pas d'aller lire la fin de suite, ça serait aller tout de suite aux vraies solutions, ça ne serait pas aussi amusant. Maintenant les pièges clés

Les numéros de ligne

Attention, très souvent, l'erreur n'est pas à la ligne suggérée mais à la ligne directement précédente. Je ne sais pas ce qu'ils ont foutu chez Microsoft, je ne saurais dire si c'est à 100% vrai mais c'est tout le temps à la ligne d'avant que se situe le problème chez moi.

Utiliser un autre navigateur si vous le pouvez pour repérer plus facilement l'erreur une fois que vous avez le numéro de ligne si vous travaillez en minifié.

L'absence de console

Ah ah, vous êtes marrons avec votre bon vieux console.log vachement pratique sous Firefox, Chrome, Safari, Opera ou même IE 8.

Allez hop, un petit polyfill pour la route :

if(!window.console) {
    console = {
        log : function (msg) {
            alert(msg);
        }
    };
}

La joie de IE 6, c'est que pour tester l'existence d'une variable censée etre globale, vous ne pouvez pas faire ça :

if(undefined !== console) {
    // ...
}

Vous êtes obligés de passer par window.

Oubliez les trucs sympas

Utilisez des polyfills si vous avez un ou deux besoins de base. Voici une liste proposée par Paul Irish dans Modernizr.

Utilisez des underscore.js ou Sugar quand vous avez beaucoup plus de besoins.

Ou sinon, rabattez vous sur du jQuery ou Mootools si vous avez vraiment des besoins lourds. Avec du DOM, du xhr etc... pas pour juste jouer avec l'un d'entre eux ou faire un simple inArray().

Vous ne mettriez pas en branle tout un corps d'armée pour aller chercher le pain ?!

Le top du top

Si vous avez Visual Studio, alors là vous allez en mode Rolls Royce. Evidemment, faudra retrouver une vieille version qui date de l'époque sinon c'est pas drôle  Mais vous allez pouvoir faire de l'édition, suivi et débogage pas à pas depuis VS.

Le tuto qui va bien est ici : http://sixrevisions.com/javascript/javascript-debugging-techniques-in-ie-6/

Bon il y a aussi Firebug Lite

Je vous ai un peu promené dans diverses astuces, mais vous avez aussi Firebug Lite, mais c'est pas vraiment mieux en fait.

Plus sérieusement, je suis pas un grand fan mais Firebug reste un super outil après Dev Tools, mais vu que ce dernier n'existe pas sous IE 6... Mieux vaut DebugBar.

Sauf que là c'est la version Lite, donc vous n'aurez pas d'onglet réseau, de cookies ou de débogage pas à pas.

Sur la DebugBar, vous aurez un équivalent de l'onglet Réseau avec l'onglet HTTP(S). Bon c'est un peu pas terrible mais c'est toujours mieux que pas du tout.

L'outil officiel de Microsoft

Je remercie Vincent Voyer grâce à qui je me coucherai moins bête ce soir et en voyant IE 6 moins mauvais. Il existe une logiciel officiel de debogage pour IE 4 et supérieur.

Ça s'appelle Microsoft Script Debugger, c’est disponible ici: http://www.microsoft.com/en-us/download/details.aspx?id=22185. Je vous laisse lire le README dans le dossier d'installation pour comprendre comment ça marche mais ça n'est pas très compliqué.

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans Internet Explorer, avec comme mot(s)-clef(s) , , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • syndrael

    Eh oui, il y a toujours des sites sous IE < 9.. le pire c'est qu'il faut être confronté à des stats pour s'en rendre compte.

  • DjebbZ

    Il y a aussi http://www.charlesproxy.com/ qui permet d’intercepter, de voir et de modifier à la volée toutes les requêtes HTTP entre sa machine et Internet. Bien pratique, et pas uniquement pour IE 6.

    • Kuntz

      Oui, donc pour le coup, ça n’a rien à voir avec le sujet de l’article (très utile cela dit au passage).

      • http://www.mathieurobin.com/ Mathieu

        Effectivement, ça n’aide pas spécialement pour IE 6 mais c’est toujours bon à avoir sous la main.

        Ceci dit, si t’as un peu de courage, un bon wireshark, c’est pas mal aussi. Et ça a pour avantage de s’entraîner à lire les échanges possibles entre le serveur et la bdd par exemple. C’est moins lisible mais je préfère.

        • Juju

          Sous windows le proxy ultime et gratuit c’est fiddler, qui est en plus scriptable :)

  • http://zeroload.net Vincent Voyer

    En réalité il y a toujours eu un vrai debugger JS sous IE, bien avant firebug et consors.
    Qui permet de faire du pas à pas, d’avoir une console, d’observer les variables.

    ça s’appelle microsoft script debugger, c’est disponible ici: http://www.microsoft.com/en-us/download/details.aspx?id=22185

    ça marche sous IE6 je sais pas pourquoi si peu de gens savent ça.

    • http://www.mathieurobin.com/ Mathieu

      Roh oO

      Tu changes ma vie toi ! A l’occasion, je t’offrirai une binouse :)

      J’édite l’article en ajoutant ton soft, merci !!

Articles liés