Ce soir, je vous écris juste un petit billet (de plus gros sont en préparation, un peu de patience) afin de vous aider lors pour vos séances de déboguage Javascript. Bien sûr, sous firefox, il existe de nombreux plugins pouvant vous aider au développement. En particulier, il existe firebug qui devrait largement vous simplifier la tâche grâce aux différentes méthodes qu’il offre.

Le problème, c’est que ce plugin n’existe pas sous Opera, Internet Explorer ou sur d’autre navigateur. Donc, si, comme moi, votre navigateur favori n’a pas une tête de renard (le mien ayant la forme d’un O rouge), vous ne pouvez avoir accès à toutes les méthodes différentes méthodes dont dispose firebug.

Entre les différents navigateurs comment faire ??

Sous Opera (version 9 ou supérieur – si je ne dis pas de bêtises), vous avez Opera Dragonfly qui vous offre la fonction console.log, la navigation dans le dom, une visualisation des entêtes, des réponses, du CSS…. Pour rajouter du style, visualiser vos entêtes, c’est sûr il n’y a rien à redire. Mais on peut pas dire que cela est aussi performant que Firebug pour le deboguage Javasript (par exemple lorsque vous souhaitez visualisez une méthode, du XML, du JSON).

Sous IE, je serais incapable de vous dire s’il y a la moindre équivalent (et si quelque chose existe, je suis pas sûr que les infos renvoyer vous soit d’une grande utilité…). Pour Chrome, si ma mémoire ne me trompe, il existe aussi une console, mais je serais incapable de vous dire de quoi elle a l’air et ce qu’elle peut faire. Pour Safari, je serais incapable de vous dire quoi que ce soit.

Bref, faire un débug de votre Javasript sous un navigateur ou la fonction console.log est inexistante est un vrai défit (il vous reste les alert à tout bout de champ, pas vraiment une solution en soit). Si vous avez besoin de visualiser plus que du texte (par exemple un élément ou une méthode), là, vous avez besoin de firebug.

Repasser à Firefox ??

Oui, en effet, repasser à firefox pourrait être une solution. Sinon, vous pouvez aussi implémenter votre propre fonction debug comme suit :

function debug(var) {
	// si vous voulez des alerts si rien n'existe,
	// remplacer function () {} part alert
	( (window.console && console.log) || (window.opera && opera.postError) || function(){}).call(this, var);
}

Code Javascript

Mais il existe une autre solution afin d’éviter le changement de navigateur et d’avoir une vraie objet console qui possède un peu plus que la méthode log :
firebug-lite

Il vous suffit juste de rajouter dans les lignes suivantes entre vos balises head :

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

Code html

Attention, n’oubliez pas de les enlever au passage en prod, ça ferait sacrément tâche sinon.

Pour voir de quoi ça à l’air et afin d’avoir de plus amples informations, passez donc faire un tour sur leur site web : http://getfirebug.com/firebuglite

Pas d articles similaires.