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 :


Site marchand Chinois - Gearbest

Tomtop.com site marchand chinois

Logo banggood.com

Publicité

Communiquez avec Geekmps Sur Facebook

Les pubs Adsense enregistrent pas mal de choses dans ses cookies, c'est votre droit de ne pas en vouloir (par ailleurs j'utilise piwik avec Do not track activé).