Conditions d'utilisation et licence
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
version 1.0.0, dernière mise à jour le 4 février 2019.
Ces commandes permettent d'afficher des messages dans la console du navigateur. Ces messages sont filtrables en fonction de leur type. console.log() et console.info() sont à réserver aux messages informatifs. console.warn() affiche un message d'avertissement, console.error() un message d'erreur.
On peut nettoyer l'historique d'affichage de la console avec console.clear().
Quand la console est ouverte, n'importe quelle expression peut être évaluée. On peut par exemple saisir le nom d'une variable dans la console pour en connaître la valeur, ou bien modifier le DOM. $_ permet de rappeler le dernier résultat calculé.
Modifier le DOM est plus facile quand on peut interagir directement avec l'inspecteur. Par exemple, si on sélectionne un élément dans l'inspecteur, $0 permet d'y faire référence dans la console (et, par exemple, lui ajouter du contenu…), $1 permet de spécifier l'avant-dernier élément sélectionné. Ces raccourcis fonctionnent jusqu'à $4.
On peut aussi utiliser cette fonction $ pour accéder au DOM. Elle fonctionne alors de manière similaire à la méthode querySelector. Par exemple, $("p") renvoie le même résultat que document.querySelector("p");.
Afficher un tableau dans la console peut donner un résultat peu lisible. On peut utiliser la commande console.table() qui donne un meilleur confort d'affichage.
Parfois, les messages affichés dans la console s'entassent sans grand ordre. Il est possible de les regrouper à l'aide de deux couples d'instructions.
console.group("groupe1"); et console.groupEnd() d'une part ;
console.groupCollapsed("groupe2"); et console.groupEnd() d'autre part.
Dans le second cas, le groupe de messages apparaît par défaut « replié » dans la console.
Il est parfois utile de n'afficher un message dans la console que si une condition est vérifiée. Il est possible de ne pas alourdir le code lui-même p'ar l'utilisation d'un if, en recourant à la commande console.assert(condition, message). message est affiché si condition vaut false. Ainsi, if (a==2) console.log("Erreur"); est similaire à console.assert(a!=2, "Erreur");.
La trace est l'enchaînement des appels de fonctions. Une fonction pouvant être appelée à partir d'endroits divers du code, dans des contextes différents, on peut remonter la piste de l'appel à l'aide de l'instruction console.trace();.
Mesurer les performances d'un script peut se faire simplement à l'aide de compteurs dans la console. Un compteur est initialisé par la commande console.time("compteur1");. À tout instant du déroulement du code, on peut afficher dans la console la valeur du compteur avec console.timeLog("compteur1";. Enfin, le compteur est arrêté avec la commande console.timeEnd("compteur1"); ; il n'est alors plus disponible. Ces instructions sont commodes pour identifier d'éventuelles zones du code à l'origine de baisses de performances.
Dans certains environnements complexes, le cadre de fonctionnement de certains scripts n'est pas clairement défini. Il s'ensuit que malgré toutes les précautions prises, des fonctions conçues pour s'exécuter dans un certain contexte sont susceptibles de produire des sorties inadaptées, voire de générer des erreurs dites « silencieuses » car n'influençant pas de manière significative voire visible le fonctionnement du script. Dans ces conditions, prévoir un système de gestion d'erreur est une bonne précaution à prendre. JavaScript, à l'instar de nombreux langages de programmation, fournit des instructions try et catch permettant de gérer ces exceptions. Par exemple…
function verifPrenom(prenom)
{
var valides=['Alfred', 'Bertrand', 'Cunégonde'] ;
var present=false ;
for (var i=0;i<valides.length;i++)
{
if (prenom === valides[i]) present=true ;
}
if(present)
{
return prenom ;
} else
{
throw(new
Error("Prénom invalide")) ;
}
}
try {
//Instructions dont il faut tester le bon fonctionnement
prenomChoisi = verifPrenom(monPrenom) ;
} catch(erreur)
{
prenomChoisi = "invalide" ;
//Appel d'une fonction de gestion de l'erreur
gestionErreur(erreur.name+" "+erreur.message) ;
}
name est une propriété de l'objet erreur contenant le nom de l'erreur générée, message est une propriété de l'objet erreur contenant le message personnalisé défini via la fonction Error. Dans ce cas, l'exécution du JavaScript est stoppée. Les types d'erreur reconnus sont listés sur la page de référence des erreurs sur MDN.
Signaler une erreur ne signifie pas que le code se termine proprement. Il est parfois nécessaire de forcer quelques opérations (par exemple la fermeture d'un fichier ouvert en lecture). L'instruction finally est toujours exécutée, que le code ait généré une erreur ou non. Par exemple,
let saisie = prompt('Saisissez un nombre') ;
try {
var nb = parseFloat(saisie) ;
if (Number.isNaN(nb)) throw (new Error("La valeur saisie ne peut être transformée en nombre")) ;
}
catch (erreur) {
console.error(erreur.message) ;
}
finally (erreur) {
console.log(Message final) ;
}
Dans l'exemple précédent, le « message final » est affiché, que la valeur saisie soit un nombre ou non.
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.