And to be more precise: How to get the call-stack of a Javascript function everytime she's called without blocking the execution.

From time to time you may want to see every call-stack of a specific function for profiling concerns.

Here is a naive approach:


When executed in firebug, only 1 Error is shown. We miss the alert() and the second call from doAnotherThing.

Solution? Prefer console.log instead of throw:


Now our 2 error (with call-stack) appear in Firebug while the alert('ok') pop-out as expected.

I just wrote this piece of code (mainly for fun) which let you use Firebug methods with chained calls.



Usage:



Ps: If you want to create chainable methods, just add "return this;" at each methods end. makeChainable is only usefull with already created objects.

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.

 

Vous l’avez peut-être remarqué, il est “impossible” de récupérer certaines photos sous Flickr en effectuant un clic droit puis Enregistrer l’image sous…. Vous obtiendrez alors une image transparente.

Pourquoi ? L’idée pour “protéger” une photo est de lui superposer une autre image de même taille et transparente (ou un filigrane). Ainsi la majorité des utilisateurs ne pourrons pas enregistrer l’image. Cette technique est aussi utilisée par les sites de vente de fonds d’écrans pour téléphone portable et bien d’autre à vous de voir lequel.

Donc, il suffit simplement d’enlever l’image de “protection” pour pouvoir atteindre le saint graal. Pour cela, j’aurai pu créer un bookmarklet pour Flickr, mais quid des autres sites ? Donc je vais simplement donner une des manipulations possibles et qui me semble la plus rapide.

 

Allez par exemple sur cette page Flickr qui contient une photo protégée, puis :

• Ouvrez Firebug
• Inspecter
• Clic sur la photo que vous souhaitez “déprotéger”
• Clic droit sur la partie de code html qui à été surlignée dans Firebug
• Supprimer l’élément
• Fermez firebug
• Maintenant vous pouvez enregistrer l’image, ou simplement l’afficher séparément.