Tout intégrateur néophyte, a vu un jour ou l’autre son site internet, fraichement intégré sous Firefox, être complètement trucidé lorsqu’il testa ce dernier sous Internet Explorer 6-7 voire même sous la version 8. Les interprétations parfois douteuses d’IE, notamment lorsque l’on parle de float, de bordure, de background-image, de min ou max-width/height  ou du comportement des images .png, peuvent amener l’intégrateur au bord du désespoir absolu.

Parfois sous IE, les solutions rationnelles et logiques ne fonctionnent pas alors que les scénarios les plus loufoques donnent les résultats voulus. De plus, les outils fournis par Microsoft pour faire le « debugage » paraissent incomplet et peu efficace (exemple IE Developer Toolbar). Dans IE Tester, la DebugBar, renseigne certes sur la nature de la structure CSS, mais dû à son positionnement fixe à gauche de la fenêtre, elle vient parfois réduire le contenu de la fenêtre à un point où la page s’affiche déjà de manière tout chaotique (surtout sur les écrans à faible résolution).

Or, lors du debug les utilisateurs de Firefox ont pour la plupart, adoptés un outil fort intéressant appellé Firebug. Bonne nouvelle, Firebug est désormais disponible en mode partiel sous IE, Opera, Safari.On parle ici de Firebug Lite.

Un outil qui pourra mettre fin à une incessante période de traumatisme psychologique chez les intégrateurs web de ce monde?

On est loin du compte…

Qu’est-ce que Firebug Lite ?

Firebug Lite est le petit frère de l’extension légendaire que l’on retrouve sous Firefox, en version <script> Javascript. Firebug Lite se décline en trois modes d’utilisation distincts soit :

• en insérant une ligne de code dans la page html, pour une utilisation en ligne, activer par la touche F12;
• en téléchargement, pour intégrer les fichiers .js à votre projet pour une utilisation hors-ligne;
• en « bookmarklet » ou pour les puristes de la loi 101, en applisignet, qui consite à faire d’un lien favoris dans votre barre de signets, un lien vers une application javascript qui s’ouvre à l’intérieur du site actuellement consulté ( voir l’image A )

Image A – Firebug Lite en bookmarklet

Les comparaisons entre Firebug et Firebug Lite?

Il ne faut pas rêver en couleurs 32 bits, Firebug Lite est une version fort minimaliste de l’authentique Firebug. Pour commencer, les similitudes sont:

• dans la possibilité d’inspecter les différentes sections du siteavec l’outil INSPECT, qui permet de voir les codes HTML, CSS, Script, DOM et XHR.

• dans la présence de la CONSOLE Firebug où les utilisateurs expérimentés peuvent questionner directement le site. Voir la liste complète des commandes sur

  http://getfirebug.com/console.html.

• Le positionnement de la fenêtre de Firebug Lite, dans le bas de l’écran est identique à Firebug, n’affectant pas la mise en forme du site. Il est aussi possible d’ouvrir Firebug Lite dans une fenêtre indépendante pour pouvoir voir pleinement les renseignements affichés.

Comme vous le devinez déjà, il existe plusieurs différences majeures entre les deux versions de Firebug :

• Il est impossible d’éditer les fichiers HTML, CSS, etc, en direct de la page. Les informations affichées par Firebug Lite sont statique. La grande différence avec Firebug, c’est justement qu’il était possible de faire des modifications à même la page et de voir les résultats en direct. Firebug Lite ne donne malheureusement pas cette latitude, qui faisait toute la force de son grand frère.
• L’onglet excessivement pratique RÉSEAU retrouvé dans Firebug est absent dans Firebug Lite.
• Il y a aussi un absent de taille, surtout pour les accrocs du respect « pixelistique » du design / intégration, soit l’onglet Pixel Perfect.
• Sous Firefox, lorsque l’on inspectait un lien avec Firebug, ce-dernier était temporairement désactivé tant que l’on était en mode INSPECT, diffusant ainsi les informations désirés. Or, sous IE, lorsque l’on fait INSPECT sur un lien, on active ce lien, on quitte la page actuelle et Firebug se ferme, vû qu’il était ouvert comme un script javascript à même la page active. Ce bug se décline sous tous les modes d’utilisation de Firebug Lite.

Firebug Lite, une faible lumière dans la grande obscurité interprétative d’IE…

Pour ceux qui voyaient en Firebug Lite, une solution à biens des migraines constamment renouvelées à chaque debug de fin de projet, je n’ai aucun autre choix que d’être submergé de compassion à votre égard. J’ai aussi passé par ce stade de joie/déception en apprenant l’existence de cet outil. Je m’attendais à un jumeau identique, ou quelques peu diminué du « genuine » Firebug.

Mais l’appellation Lite aurait dû me mettre sérieusement la puce à l’oreille… Somme toute, j’ai adopté avec enthousiasme cette petite application, mais je dois m’avouer un peu déçu par ses limites, qui s’approchent, outre la console, des fonctions offertes par le debugbar d’IE Tester (sans les bugs d’affichage de ce dernier) ou de la IE Developer Toolbar d’IE.

Mais garder espoir, distingué(e)s collègues, Firebug Lite est en amélioration constante et nous verrons fort probablement de nouvelles versions se rapprocher de notre fidèle compagnon qu’est devenu Firebug.

Les sources utilisés pour écrire cet article sont :
http://remysharp.com/2007/03/13/firebug-in-ie-for-any-web-site/
http://getfirebug.com/lite/ie.html
http://blog.strictly-software.com/2009/02/using-firebug-lite-for-debugging.html
http://blog.jaysalvat.com/articles/firebug-lite-le-firebug-cross-browser-sans-extension.php

Bon debug et longue vie à Firebug Lite.