« »
1/12/2009

Débugger avec Firebug sous Firefox en testant en parallèle avec IE, Opera et Chrome

Si vous développez et débuggez votre application sous Firefox et utilisez les méthodes de l’objet console de Firebug, tel que :

console.debug(maVariable);
console.info('Hello World :', monApplication.version);
console.log('Logged in');

Il vous est alors impossible de tester votre code en parallèle sous Internet Explorer, Opera et Chrome[1] sans voir apparaitre un de ces messages :

/* IE */
Erreur : 'console' est indéfini

/* Opera */
Error:
name: ReferenceError
message: Statement on line 437: Undefined variable: console

/* Chrome (v1.x.xxx.x) */
Uncaught TypeError: Object #<a console="console"> has no method 'debug'

 

Commençons donc par un petit rappel sur les moyens de débug offert par ces différents navigateurs :

 

Internet Explorer

Il n’existe pas de console en natif qui propose les mêmes fonctionnalités que celles offertes par Firebug. Cependant des plugins tel que DebugBar devraient permettre cela.

 

Opera

Opera possède sa propre méthode postError() mais son utilisation est limitée car elle n’affiche pas le contenu des objets

opera.postError([1,2,3,4,5]);//Affiche: 1,2,3,4,5
opera.postError('Mon tableau',[1,2,3,4,5]);//Affiche: Mon tableau,1,2,3,4,5
opera.postError({maPropriete: 'Hello', maMethode : function(){return 'World';}});//Affiche: [object Object]

Google Chrome

Dans ses dernières versions (testé sous 2.0.156.1) Chrome supporte partiellement, via sa Console Javascript (Ctrl+Maj+J) les méthodes suivantes :

console.debug();
console.info();
console.log();

Partiellement car il est actuellement impossible de passer plusieurs objets/tableaux via un seul appel

monTableau = [1,2,3,4,5,6];
monObjet = {maPropriete : 'Hello', maMethode : function(){return 'World';}};
console.debug(monTableau,monObjet);//Affiche: [1, 2, 3, 4, 5, 6] Object
console.debug(monObjet);//Affiche le contenu de l'objet monObjet

La solution

Voici un bout de code (snippet) à placer avant tout appel aux méthodes console.debug, console.info et console.log.

//On créé l’objet console s’il n’existe pas (sous d’autre navigateur que Firebox & Chrome)
if(typeof console !== 'object')
     console = {};
if((typeof console.debug) !== 'function')//On pourrait aussi vérifier pour console.info et console.log
{
     if(typeof opera === 'object')//On redirige les appels vers opera.postError();
         console = {debug : function(){return opera.postError(arguments);}, info : function(){this.debug('[INFO] ',arguments);}, log :
function(){this.debug('[LOG] ',arguments);}};
     else//Ne rien afficher sur les autres navigateurs
         console = {debug : function(){return true;},info : function(){return true;}, log : function(){return true;}};
}

Il vous est maintenant possible de tester (voir même de debugger si vous êtes sous Chrome et/ou Opera) votre application sans vous soucier de supprimer les lignes de debug pour Firebug. Je vous conseille toutefois de placer ce bout de code dans l’événement DomReady afin d’éviter tout problème de chargement.

DomReady avec jQuery :

$(document).ready(function(){ /* bout de code à copier ici */ });

DomReady avec MooTools:

window.addEvent('domready', function() { /* bout de code à copier ici */ });

[1] Versions 1.x.xxx.x de Chrome

« »
 
 
Made with on a hot august night.
http://bit.ly/1II1u5L