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
Avertissement : La méthode que je présente ici n’est à utiliser que si les photos vous appartiennent et que vous avez perdu vos identifiants Flickr.
Ce billet s'adresse aux personnes naviguant sous Firefox, utilisant l'extension 
Un rapide Feedback sur Firefox 3 RC1 :