var_dump et print_r en Javascript

Les développeurs PHP sont habitués à utiliser les fonctions var_dump et print_r pour voir le contenu des variables.

En Javascript ces fonctions n'existent pas, mais il y a bien mieux : la console de debuggage Javascript, dont tous les vrais navigateurs web sont équipés :

• Chrome : appuyer sur la touche F12 (ou aller dans le menu Outils > Outils de développement) puis aller dans l'onglet console.
• Safari : Safari est identique à Chrome, les 2 navigateurs utilisent le même moteur de rendu : Webkit. Sur Safari, il faut activer les outils de développement dans les préférences.
• Firefox : les outils de développement natif de Firefox sont très limités, il faut installer l'extension Firebug.
• Opera : la console de débuggage d'Opera s'appelle DragonFly. Sauf que Opera va prochainement migrer vers Webkit comme Safari et Chrome, donc DragonFly va disparaître
• Internet Explorer : les outils d'IE sont complètement pourris, manifestement microsoft n'a toujours pas inclus de vraie console avec IE10, c'est la même version qu'utilise IE9 et qu'utilisait déjà IE8

Pour afficher le contenu d'une variable javascript, il suffit de taper le nom de la variable dans la console.

Si la variable ne se trouve pas dans le scope globale (ce qui est par exemple le cas pour une variable locale dans une fonction), il faut créer un point d'arrêt (breakpoint), et exécuter la fonction (soit en utilisant le site, soit en appelant la fonction via la console).

L'exécution du Javascript sera alors mise en pause au niveau du point d'arrêt, il est alors possible d'afficher la variable dans la console ou à l'aide d'un espion (watch).

Dans un tout autre contexte, cet article est très intéressant : protéger une feuille avec un mot de passe excel.

Une autre méthode, plus simple mais moins pratique que les points d'arrêt, consiste à appeler la fonction console.log(variable); dans le code JS. Cette ligne de code provoque généralement une erreur lorsque le debugger JS n'est pas activé (par exemple lorsque Firebug n'est pas activé), et il faut penser à les supprimer après les tests.

Certaines consoles comme celle de Firebug offrent d'autres fonctions qui permettent de contrôler la console :

• console.info(foo) : affiche une petite icône d'information
• console.warn(foo) : affiche un message d'avertissement avec une icône point d'exclamation
• console.err(foo) : affiche une erreur en rouge avec le numéro de ligne d'erreur
• console.clear(foo) : efface la console (ça ne marche que sur Firefox, pas sur Chrome, et c'est bien dommage

Fini de lire cette page ? allez faire un tour ici : traitement sépia vintage, ça peut vous intéresser.