firebug : un ami qui vous veut du bien #javascript

Firebug possède une série d'option très pratique comme par exemple le 'profiler'. Ce dernier permet de mesurer le temps d'exécution de chaque fonction javascript.
Voici une copie d'écran.

Le profiler.
L'utilisation est assez simple:

• Aller sur le site concerné.
• Activer firebug (F12) 
• Vérifier que l'option 'script' de firebug est active.(volet script) 
• Puis aller dans l'onglet 'console' 
• Commencer l'opération de profilage en cliquant sur le bouton profile.
• Naviguer sur la page.
• Arrêter le profilage en cliquant à nouveau sur le bouton profile. 

Les informations s'affichent dans la fenêtre firebug. Il est possible d’insérer des demandes de profilage dans le code source. (voir lien)

Les autres outils livrés avec firebug.

Les informations de log. En plus du simple console.log(), javascript propose des niveaux de log.
Il est possible d'avoir un affichage différencié en fonction du niveau de log. Celui ci va de debug à error.
Si une des méthodes de console.NIVEAU() est appelée avec un objet en paramètre, un lien hypertexte pointera sur la ligne et l'objet.
Aussi, il est préférable d'écrire console.niveau("ceci est mon message",object) au  lieu d'écrire ("ceci est mon message de log"+object)

• console.debug(object[, object, ...])
• console.info(object[, object, ...])
• console.warn(object[, object, ...])
• console.error(object[, object, ...])  

	<script type="text/javascript" >
	var obj= {tostring: "je suis la representation sous forme chaine"} ;
	function niveaulog(chaine) {
	console.log("chaine:" + chaine) ; // forme standard mais n'affichera pas le numero de ligne ni de lien
	console.error("chaine:" , chaine); // Cette forme permet de metttre plusieurs variables sur la même ligne
	console.warn("chaine:" , chaine) ;
	console.info("chaine:" , chaine) ;
	console.debug("chaine:" , chaine) ;
	};
	var a= "afficher ceci";
	niveaulog(a);
	var obj= {tostring: "je suis la representation sous forme chaine"} ;
	console.log("affiche:",obj) ; // affiche le message , l'objet et un lien vers la DOM.
	</script>

view raw log.js hosted with ❤ by GitHub

Les timers.
Firebug vous donne la possibilité d’insérer des  timers pour mesurer des temps exécution sur des portions de code. 
console.time(nom_timer) ;       //pour démarrer le chronomètre
console.timeEnd(nom_timer);  //pour arrêter le chronomètre

La trace d'un appel de fonction.
En insérant  un console.trace()au sein d'une fonction, la console affichera tous les appels de fonctions avec les paramètres.


Les assertions.
L'ajout de console.assert(condition,objet)  permet de lever une exception  si la condition est fausse. 
Il est donc possible de créer des tests de non régression en javascript     

En conclusion.

Firebug reste avant tout un vrai  débugger. Avec des possibilités d'exécution pas à pas, d'examen des variables ou encore la pose de point d'arrêt.