Publicité

Tout est dans le titre ou presque. Avant (il y a longtemps maintenant), en javascript, lorsqu’on avait besoin de contrôler la valeur d’une variable on faisait un bête alert(mavariable). Maintenant (et depuis un bon bout de temps) il existe une méthode bien plus élégante qui consiste à utiliser la log du navigateur. ET ça devenait indispensable avec tous les ajax et la monté en puissance de javascript dans les navigateur.
La commande est ultra simple :

console.log(mavariable)

Suivant les navigateurs on a aussi à disposition :
console.debug() remplacé par console.log()
console.dir()
console.error()
console.group()
console.groupCollapsed()
console.groupEnd()
console.info()
console.time()
console.timeEnd()
console.trace()
console.warn()
Pour la documentation et les exemple c’est ici (en anglais)

Pour ouvrir la console des navigateurs :
Firefox avec firebug, IE9, Chrome : F12 puis onglet console
Firefox sans firebug : ctrl + shift + K
Opera : Ctrl + Shift + I

exemple pour tester la chose

<html>
<head>
</head>
<body>
test de console.xxx en javascript
<script language="Javascript">
<!--
var test="GeekMPS et la log navigateur";

console.time("Test Timer");
console.trace()
alert("Cliquer pour continuer");
console.log("Ma variable: "+test);
console.dir();
console.group("test groupe");
console.log("une indentation");
console.groupCollapsed("avec un possibilité de réduit");
console.groupEnd();
console.info(test);
console.warn("test warning");
console.error("Test Message Erreur");
console.timeEnd("Test Timer");
// -->
</script>
</body>
</html>

 


voici quelques illustrations :


alert console.log() img 001 alert console.log() img 002 alert console.log() img 003 alert console.log() img 004 alert console.log() img 005



On peut aussi tirer des capacités de HTML et du stockage local :

Pour ceux qui utilisent jquery on peut aussi jouer avec $.storage.setLocal(‘test’,mavariable) qui permet de stocker des variables dans les navigateurs de dernière génération. Le problème on a pas l’historique et seule la dernière valeur s’affiche

Pour les malades des framework en natif ça donne un peu ça (article original) :

 

test stockage
<script language="Javascript">
<!--
if (typeof(localStorage) == "undefined" ) {
alert("Votre navigateur de supporte pas le stockage html5");
} else {
try {
localStorage.setItem("testLocal", "Test GeekMPS local storage !"); //sauvegarde dans database, “key”, “value”
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert("Quota dépassé!"); //On test l’erreur du dépassement de capacités du navigateur
}
}

document.write(localStorage.getItem("testLocal")); //on récupère la valeur localStorage.removeItem(“test”); //on efface
}
// -->
</script>

 

 

alert console.log() img 006 alert console.log() img 007 alert console.log() img 008 alert console.log() img 009


Vous avez aimé cet article ? Alors partagez-le avec vos amis en cliquant sur les boutons ci-dessous :


Commentaires (2)

  • Invité - BonOKMaisQuandMeme

    Bon, OK pour oublier alert(), mais avec un souci majeur si je veux débuger une fonction, je fais console.log(vl) avec vl une variable locale à ma fonction, ça marche super, puis 2 millisecondes après, ma fonction se termine et ma variable vl meurt ET L'AFFICHAGE DANS LA CONSOLE AUSSI. Problème, moi, en 2 millisecondes, je n'ai pas eu le temps de lire... Au moins, avec alert(); c'était bloquant ! Je cliquais sur "OK" quand j'avais fini de lire !! Comment on fait, du coup ? On apprend à lire en 2 millisecondes ?

  • Bonjour
    Dans votre cas, je pense que le débogage via le navigateur et la pose de breakpoint sera surement plus efficace. (sinon lire en 2 millisecondes est une option)
    Je trouve très étonnant que la log disparaissent. Y a-t-il un rechargement de page? La log est normalement persistante, donc fonction finie ou pas, une fois écrit en console, c'est écrit.
    Quel navigateur utilisez vous ? Pour débugger en général j'utilise Chrome (avant j'utilisais Firefox), si minified, il faut une référence au fichier *.js.map (la version non minified/compressé) si existant.
    Bien à vous
    Jérôme

Poster un commentaire en tant qu'invité

0

La pub ça ne rapporte pas grand chose, en plus ça vous laisse d'horribles cookies non comestibles, autrement appelé trackers. Ce cookie est utilisé par DoubleClick (Google Adsense). Vous avez le droit de ne pas en vouloir et donc quitter cet excellent blog. (par ailleurs j'utilise piwik).