Cours de JavaScript - Utilisation de la console

version 1.0.0, dernière mise à jour le 4 février 2019.

   

Table des matières (TdM)

  1. I. La console
    1. Commandes de base
      1. Messages
      2. Évaluation d'expressions
      3. Interagir avec l'inspecteur
    2. Amélioration de l'affichage
      1. Affichage des tableaux
      2. Regroupements
    3. Débogage et surveillance des performances
      1. Conditionner un affichage
      2. Remonter une trace d'appels
      3. Chronométrer
  1. II. Intercepter les erreurs
    1. Le couple try/catch
      1. Exercice : Essai try/catch
    2. Finaliser proprement le traitement d'une erreur avec finally
      1. Exercice : try, catch et finally

Retour au menu

Contenu du cours

I. La console

1. Commandes de base

a. Messages

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().

b. Évaluation d'expressions

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é.

c. Interagir avec l'inspecteur

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");.

>Retour à la TdM

2. Amélioration de l'affichage

a. Affichage des tableaux

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.

b. Regroupements

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.

Dans le second cas, le groupe de messages apparaît par défaut « replié » dans la console.

>Retour à la TdM

3. Débogage et surveillance des performances

a. Conditionner un affichage

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");.

b. Remonter une trace d'appels

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();.

c. Chronométrer

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.

>Retour à la TdM

II. Intercepter les erreurs

1. Le couple try/catch

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.

Exercice 1. Essai try/catch

Énoncé
Correction

>Retour à la TdM

2. Finaliser proprement le traitement d'une erreur avec finally

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.

Exercice 1. try, catch et finally

Énoncé
Correction

>Retour à la TdM

Historique de ce document

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu