L’API Console de Firebug

Firebug Le développement Web évoluerDans un précédent article, je vous parlais des extensions Firefox utiles pour les développeurs web.
J’aimerais revenir sur une de ses extensions, Firebug et particulièrement sur son API Console.
Lorsque l’on développe en JavaScript il n’y a rien de plus frustrant que de ne pas pouvoir disposer d’une console afin d’y visualiser des informations.
Jusqu’alors je me contentais de la fonction alert(), pas très poussé me direz vous…
Récemment Mister Neopheus (aussi appelé Dieu dans certains milieux), m’a passé l’information que je vais vous transmettre à mon tour !

Fini les alert ! Bonjour l’API Console de Firebug.

Dans un premier temps il vous faut installer Firebug, c’est le minimum syndical ! Et c’est tout l’API y est directement intégrée.
Dans un second temps voici une traduction de la doc de l’API Console. La page originale se trouve à cette adresse : http://getfirebug.com/console.html

Attention si vous laissez trainer un appel à une des fonctions de l’API console et que vous testez votre script sur Internet Explorer, celui-ci vous rappellera à l’ordre. Ne disposant pas d’une telle API il génèrera une erreur ! Mais Ils ont pensé à nous ! Firebug sur Internet Explorer et autre navigateur c’est par ici !

Traduction :

Firebug ajoute une variable globale nommée « console » à toutes les pages Web chargées dans Firefox. Cet objet contient de nombreuses méthodes qui vous permettent d’écrire dans la console de Firebug.

console.log (object [, objet, …])

Écrit un message dans la console. Vous pouvez passer autant d’arguments que vous le souhaitez, et ils seront affichés dans la console dans une seule et même ligne
Le premier argument de la fonction « log » doit être une chaîne de caractères. Elle peut contenir des printf-like utilisés comme modèle de substitution.
Par exemple:
console.log("The %s jumped over %d tall buildings", animal, count);

L’exemple ci-dessus peut être ré-écrit sans chaîne de substitution pour atteindre le même résultat:
console.log("The", animal, "jumped over", count, "tall buildings");

Ces deux techniques peuvent être combinées. Si vous utilisez une chaîne de substitution mais que vous fournissez plus d’arguments que de substituts, les autres seront ajoutés à la fin de la première chaîne de caractère.
Exemple :
console.log("I am %s and I have:", myName, thing1, thing2, thing3);

Si les objets sont identifiés, ils ne seront pas écrits comme du texte statique, mais comme des hyperliens interactifs cliquables pour être inspectés dans les onglets HTML, CSS, Script, ou DOM de FireBug. Vous pouvez également utiliser le modèle %o pour substituer un lien hypertexte dans une chaîne de caractères.

Voici l’ensemble des modèles que vous pouvez utiliser pour une chaîne de substitution:

Modèle de substitution
%s String
%d,%i Entier (la mise en forme numérique n’est pas encore supportée)
%f Nombre à virgule flottante (la mise en forme numérique n’est pas encore supportée)
o% Objet hyperlien

console.debug(object[, object, …])

Écrit un message dans la console, et comprend un lien hypertexte vers la ligne où la fonction a été appelée.

console.info(object[, object, …])

Écrit un message dans la console précédé d’une icône « info« , une coloration syntaxique est appliquée aux codes affichés et un lien hypertexte renvoie vers la ligne où la fonction a été appelée.

console.warn(object[, object, …])

Écrit un message à la console précédée d’une icône « avertissement« , une coloration syntaxique est appliquée aux codes affichés et un lien hypertexte renvoie vers la ligne où la fonction a été appelée.

console.error(object[, object, …])

Écrit un message à la console précédée d’une icône « erreur« , une coloration syntaxique est appliquée aux codes affichés et un lien hypertexte renvoie vers la ligne où la fonction a été appelée.

console.assert(expression[, object, …])

Tests si l’expression est vraie. Si non, un message sera écrit dans la console et une exception sera lancée.

console.dir(object)

Imprime une liste interactive de toutes les propriétés de l’objet. La présentation est identique à celle de l’onglet DOM.

console.dirxml(node)

Imprime l’arborescence d’un élément XML ou HTML. La présentation est identique à l’onglet HTML. Vous pouvez cliquer sur un noeud pour l’examiner dans l’onglet HTML.

console.trace()

Imprime une trace de la pile interactive de JavaScript au point où il est appelé.

La trace de la pile détaille les fonctions présentes dans celle-ci, ainsi que les valeurs qui ont été passées comme arguments. Vous pouvez cliquer sur chaque fonction pour voir le code source dans l’onglet Script, et aussi, cliquer sur chaque valeur d’argument et les examiner dans les onglets DOM ou HTML.

console.group(object[, object, …])

Écrit un message dans la console et ouvre un bloc imbriqué pour indenter tous les futurs messages envoyés à la console. Utilser console.groupEnd() pour fermer le bloc.

console.groupEnd()

Ferme le bloc, appelé par la fonction group, le plus récemment ouvert.

console.time(name)

Crée une nouvelle minuterie, utilisant comme nom la chaîne de caractères passée en paramètre. Utiliser console.timeEnd(name) avec le même nom pour arrêter la minuterie et écrire le temps écoulé dans la console.

console.timeEnd(name)

Arrête une minuterie créée par un appel de la fonction console.time(name) et écrit le temps écoulé.

console.profile([title])

Active le profiler JavaScript. L’argument optionnel titre contient le texte à imprimer dans l’en-tête du rapport du profil.

console.profileEnd()

Arrête la création du rapport du profile et l’affiche.

console.count([title])

Écrit le nombre de fois où la ligne de code où count est utilisé a été exécutée. L’argument optionnel titre permet d’afficher un message en plus du nombre retourné par count.

Tagués avec :
Publié dans Faites du Web, JavaScript - AJAX

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*