Une alternative à alert : console.log

Vous avez remarqué que souvent dans mes scripts j'introduis des instructions provisoires basées sur la méthode alert.
Grâce à ces instructions je sais par exemple le type de données retourné. Ce qui est très important pour la suite du script. Par exemple si le type retourné est string je vais devoir convertir avant toute tentative d'incrémentation.
L'inconvénient d'une instruction basée sur alert est qu'elle provoque une pause dans l'exécution du programme.
Autre inconvénient : dès que j'ai bien vérifié la validité du script je dois supprimer ces instructions provisoires.

Les navigateurs récents proposent une alternative : console.log
Le gros avantage de cette instruction c'est qu'il n'y a plus d'interruption dans l'exécution du script car les résultats sont affichées dans la console de débogage.
Autre avantage : je n'ai pas besoin de supprimer ces instructions de débogage puisqu'elles s'affichent dans un volet qui en principe n'est pas affiché ; En effet la plupart des internautes ignorent tout de cette console.

Dans le chapitre suivant vous verrez comment déplacer le requin dans le cadre.

Le code de la page (extraits)

Le HTML :

... <div style = "display : block ; width : 90% ; height : 400px ; position : relative ; background-image: url(../images/fond3.jpg) ; background-size:cover; margin : auto ; " > <img id ='requin' src ='../images/requin.gif' style = "position : absolute ; top : 10px; left : 10% ; " > </div> <h2>Le code de la page (extraits)</h2> ...

Dans le cadre du "responsive web design" le width de DIV et le left de l'image sont en %.

Le script :

	//les dimensions de la boîte div : des attributs
	var zone = document.querySelector('div'); 
	var requin = document.querySelector('#requin') ; 
	var X =zone.style.width;
	var Y =zone.style.height;
	// le positionnement du gif animé : propriétés de style
	var x = getComputedStyle(requin).left;
	var y = getComputedStyle(requin).top;
	// instructions de débogage (à supprimer ou pas)
	console.log("largeur zone : " + X + "type : " + typeof(X)) ; 
	console.log("hauteur zone : " + Y + "type : " + typeof(Y)) ; 
	console.log("abscisse requin : " + x + "type : " + typeof(x)) ; 
	console.log("ordonnée requin : " + y + "type : " + typeof(y)) ;

Notez les quatre instructions console.log qui vont me donner des infos très utiles.

Tests

Pour afficher la console sous Chrome produisez la commande :
Personnaliser Chrome (trois points verticaux en haut à droite) / plus d'outils / outils de développement / onglet "console"

Pour afficher la console "web" sous Firefox la commande est :
Ouvrir menu (trois traits horizontaux en haut à droite) / outils de développement / console web

Si votre navigateur est IE installez Chrome ou Firefox, c'est gratuit (lol).
Retour menu