Tout ce que vous devez savoir sur la Developer Console

Un bon professionnel connaît ses outils. L'un des principaux outils dont disposent les développeurs WordPress est la console de développement JavaScript incluse dans nos navigateurs. Dans cet article, nous verrons tout ce que vous devez savoir sur la console de développement du navigateur, ainsi que quelques astuces et curiosités que vous ne connaissiez peut-être pas.

Comment accéder à la console développeur

Tout d'abord, voyons comment vous pouvez ouvrir la console développeur de votre navigateur. Si vous êtes un utilisateur de Firefox, cliquez simplement sur le menu (coin supérieur droit) et recherchez l'option Développeur Web , comme vous pouvez le voir ci-dessous :

Ensuite, sélectionnez Web Console :

et la console apparaîtra dans votre navigateur, comme vous pouvez le voir dans la capture d'écran suivante. N'oubliez pas qu'il est possible de configurer l'endroit où vous souhaitez que le panneau apparaisse exactement. Vous pouvez même le configurer pour qu'il apparaisse dans une fenêtre séparée (ce qui est très pratique si vous utilisez plusieurs moniteurs).

Si, en revanche, vous êtes un utilisateur de Chrome, la procédure est très similaire. Accédez simplement à son menu, sélectionnez Plus d'outils puis Outils de développement :

Comment utiliser la console développeur

La console JavaScript de notre navigateur est extrêmement utile pour déboguer notre code, voir ce que nos scripts enregistrent, exécuter de petites commandes et voir leurs effets sur le Web en temps réel. En tant que développeur de plugin pour WordPress, la principale utilité que la console a pour moi est évidemment le débogage, voyons donc en détail ce qu'elle propose précisément.

#1 Différents niveaux de journalisation

La première raison pour laquelle un développeur ouvre généralement la console JavaScript est de déboguer son code. Lorsqu'une erreur se produit ou que quelque chose échoue, vous trouverez probablement des informations à ce sujet dans la console. Vous pouvez même lancer vos propres messages d'information, avertissements ou erreurs quand vous le souhaitez !

Dans la capture d'écran précédente, par exemple, nous voyons que l'objet console (objet global dont le but est de nous aider à déboguer du code) a différentes méthodes pour écrire des messages dans la console :

• debug et log affichent des messages clairs.
• info affiche des messages d'information. Dans Firefox, ils affichent une icône "info" à côté du message.
• warn affiche des avertissements, signalant généralement un problème ou quelque chose qui ne va pas. Il est généralement surligné en jaune et accompagné d'une icône d'avertissement.
• L' error est généralement réservée aux erreurs les plus graves (c'est-à-dire aux choses qui ont vraiment échoué). Il est affiché en rouge et imprime également une trace de pile (c'est-à-dire quelle fonction a généré l'erreur et tous ses appelants).

L'avantage d'utiliser différents niveaux de journalisation est que nous pouvons choisir à tout moment les messages que nous voulons afficher. Par exemple, dans la capture d'écran suivante, nous avons désactivé les messages Info et Debug :

#2 Surveillance des temps d'exécution

En agile, vous entendrez souvent ceci : "faites-le fonctionner, faites-le bien, faites-le vite". Après avoir écrit du code « pour le faire fonctionner », il n'est pas improbable que le résultat soit lent et inefficace. Lorsque cela se produit, il est important d'identifier où se trouvent les goulots d'étranglement et de les résoudre.

Bien qu'il existe des outils tels que les profileurs pour trouver les coupables et comprendre exactement ce qui se passe sous le capot dans les moindres détails, nous voulons parfois une solution "rapide et sale". C'est-à-dire que nous voulons simplement identifier la fonction la plus lente dans notre code… et les minuteurs simples sont parfaits pour cette tâche !

Si vous voulez savoir combien de temps un morceau de code particulier prend pour s'exécuter, démarrez un minuteur au début du code ( console.time ) et arrêtez-le ( console.timeEnd ) lorsque votre code se termine :

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

Lorsque le code atteint le timeEnd , vous verrez le temps qu'il a fallu pour s'exécuter :

 Timer: 655ms - timer ended

Notez que lorsque nous démarrons et arrêtons une minuterie, nous lui donnons un nom (dans mon exemple, "Timer"). En effet, nous pouvons créer autant de compteurs que nous le souhaitons, chacun avec son propre nom, et les faire fonctionner tous en même temps.

# 3 compteurs automatiques

Si vous souhaitez contrôler le nombre d'exécutions de n'importe quelle fonction dans votre code ou enregistrer le nombre d'exécutions d'une boucle, utilisez console.count . Chaque fois que la fonction est exécutée, vous obtenez un nouveau journal dans votre console avec la valeur actuelle du compteur :

#4 Comment formater vos journaux

Les journaux sont là pour nous aider à comprendre ce qui se passe avec notre code. Mais cela n'est possible que si nous écrivons des journaux que nous pourrons comprendre plus tard…

Chaînes de texte

Au début de cet article, j'ai brièvement parlé de toutes les méthodes de journalisation de la console . Les exemples que j'ai partagés ont imprimé du texte brut. C'est-à-dire cette déclaration :

 console.log( 'Hello world!' );

imprimé ce texte :

 Hello world!

Et si nous voulions imprimer un objet à la place ? Bon ça:

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

devient ceci :

Mais que se passe-t-il si nous voulons enregistrer plusieurs choses ? Doit-on utiliser plusieurs appels à console.log ? Eh bien, la réponse est non, ce n'est pas nécessaire. Nous pouvons enregistrer tout ce que nous voulons avec un seul appel :

Regroupement des journaux…

Lorsque nous commençons à avoir beaucoup de logs dans notre code (comme, par exemple, ici) :

le résultat peut finir par être un peu déroutant car tous les journaux sont fusionnés en un seul flux de texte :

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

Heureusement, l'objet console propose deux méthodes pour résoudre ce problème : group et groupEnd . Avec eux, nous pouvons regrouper nos messages de journal. Créez simplement les groupes (par exemple, un groupe par fonction) :

et ils apparaîtront comme ceci:

les tables

Lorsque nous travaillons avec des collections de données, il n'est pas toujours facile de les visualiser. Par exemple, imaginons que nous ayons une liste d'éléments comme celle-ci :

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

Si nous console.log les, voici ce que nous obtenons :

ce qui est plus ou moins OK, jusqu'à ce que nous ayons plus d'objets avec plus de champs chacun. Face à ce type de structure de données, je vous recommande d'utiliser console.table pour la journaliser :

#5 Comment afficher correctement les types complexes (objets et tableaux)

Enfin, je voudrais terminer le post d'aujourd'hui avec quelque chose que peu de développeurs connaissent… Disons, par exemple, que vous travaillez sur un projet et que vous voulez voir quelle est la valeur d'un objet avant et après sa mise à jour. Pour ce faire, il est probable que vous console.log la variable avant de faire la modification et après, comme vous le voyez dans le GIF suivant :

Dans l'exemple précédent, nous enregistrons un objet qui contient une valeur définie sur 1. Nous mettons ensuite à jour la valeur à 200 et enregistrons à nouveau l'objet. On s'attendrait à ce que le premier journal affiche toujours la valeur d'origine (1), mais remarquez comment, lorsque nous développons l'objet, il affiche en fait la nouvelle valeur 200. Que se passe-t-il ?

Fondamentalement, un message de journal a une référence à l'objet et, par conséquent, lorsque nous le développons, il nous montre l'objet tel qu'il est maintenant et non tel qu'il était lorsque le journal a été créé. Maudite mutabilité !

Pour résoudre ce problème, envoyez simplement une copie dans le journal (des bibliothèques telles que lodash et sa méthode cloneDeep rendent cela très facile). De cette façon, le premier objet enregistré sera une copie qui ne peut pas être mutée (car vous n'aurez pas de référence à celui-ci) :

Et c'est tout pour aujourd'hui ! J'espère que vous avez aimé cet article. Si vous souhaitez plus d'informations sur tout ce que vous pouvez faire avec console , consultez la documentation dans MDN. N'oubliez pas de le partager avec vos amis ? Et si vous faites quelque chose de différent ou avez des conseils à partager avec nos lecteurs, laissez-nous un commentaire ?

Imagen destacada le Tim van der Kuip sur Unsplash.