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 :
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>
Comments powered by CComment