Utilisation de la console DevTools et de l'API de la console

Chaque navigateur expose une console qui vous permet d'interagir avec les API de la plate-forme Web et vous donne également un aperçu du code en imprimant des messages générés par votre code JavaScript exécuté dans la page

Chaque navigateur expose une console qui vous permet d'interagir avec leAPI de plate-forme Webet vous donne également un aperçu du code en imprimant les messages générés par votreJavaScriptcode en cours d'exécution dans la page.

The browser console

Vue d'ensemble de la console

La barre d'outils de la console est simple. Il y a un bouton pour effacer les messages de la console, ce que vous pouvez également faire en cliquant surcmd-Kdans macOS, ouctrl-Ksous Windows, un deuxième bouton qui active une barre latérale de filtrage, qui vous permet de filtrer par texte ou par type de message, par exemple les messages d'erreur, d'avertissement, d'informations, de journal ou de débogage.

Vous pouvez également choisir de masquer les messages générés par le réseau et de vous concentrer uniquement sur les messages du journal JavaScript.

Filtering console messages

La console n'est pas seulement un endroit où vous pouvez voir les messages, mais aussi le meilleur moyen d'interagir avec le code JavaScript, et souvent avec le DOM. Ou, obtenez simplement des informations sur la page.

Tapons notre premier message. Remarquez le>, cliquons là-bas et saisissons

console.log('test')

La console agit comme unREPL, ce qui signifie une boucle de lecture-évaluation-impression. En bref, il interprète notre code JavaScript et imprime quelque chose.

Utiliser le formatage console.log

Comme tu vois,console.log('test')imprime «test» dans la console.

Utilisantconsole.logdans votre code JavaScript peut vous aider à déboguer par exemple en imprimant des chaînes statiques, mais vous pouvez également lui passer une variable, qui peut être un type natif JavaScript (par exemple un entier) ou un objet.

Vous pouvez transmettre plusieurs variables àconsole.log, par exemple:

console.log('test1', 'test2')

Nous pouvons également formater de jolies phrases en passant des variables et un spécificateur de format.

Par exemple:

console.log('My %s has %d years', 'cat', 2)

%sformater une variable sous forme de chaîne
%dou%iformater une variable sous forme d'entier
%fformater une variable sous forme de nombre à virgule flottante
%opeut être utilisé pour imprimer un élément DOM
%Outilisé pour imprimer une représentation d'objet

Exemple:

console.log('%o, %O', document.body, document.body)

Print objects in the console

Un autre spécificateur de format utile est%c, qui permet de passer du CSS pour formater une chaîne. Par exemple:

console.log(
  '%c My %s has %d years',
  'color: yellow; background:black; font-size: 16pt',
  'cat',
  2
)

Format in the console using CSS

Effacer la console

Il existe trois façons d'effacer la console tout en travaillant dessus, avec différentes méthodes de saisie.

La première façon est de cliquer sur leEffacer le journal de la consolebouton sur la barre d'outils de la console.

La deuxième méthode consiste à taperconsole.clear()à l'intérieur de la console, ou dans votreFonction JavaScriptqui s'exécute dans votre application / site.

Vous pouvez également simplement taperclear().

La troisième méthode consiste à utiliser un raccourci clavier, et c'estcmd-k(mac) ouctrl + l(Gagner)

Comptage des éléments

console.count()est une méthode pratique.

Prenez ce code:

const x = 1
const y = 2
const z = 3
console.count(
  'The value of x is ' + x + ' and has been checked .. how many times?'
)
console.count(
  'The value of x is ' + x + ' and has been checked .. how many times?'
)
console.count(
  'The value of y is ' + y + ' and has been checked .. how many times?'
)

Ce qui se passe, c'est que count compte le nombre de fois qu'une chaîne est imprimée et affiche le nombre à côté:

Counting the times a string is printed

Vous pouvez simplement compter les pommes et les oranges:

const oranges = ['orange', 'orange']
const apples = ['just one apple']
oranges.forEach(fruit => {
  console.count(fruit)
})
apples.forEach(fruit => {
  console.count(fruit)
})

Counting the fruits

Enregistrer des objets plus complexes

console.logest assez étonnant d'inspecter les variables. Vous pouvez également lui transmettre un objet et il fera de son mieux pour vous l'imprimer de manière lisible. La plupart du temps, cela signifie qu'il imprime une représentation sous forme de chaîne de l'objet.

Par exemple, essayez

console.log([1, 2])

Une autre option pour imprimer des objets consiste à utiliserconsole.dir:

console.dir([1, 2])

Comme vous pouvez le voir, cette méthode imprime la variable dans une représentation de type JSON, vous pouvez donc inspecter toutes ses propriétés.

La même chose que la sortie console.dir est réalisable en faisant

console.log('%O', [1, 2])

Console logging with dir

Lequel utiliser dépend de ce que vous devez déboguer bien sûr, et l'un des deux peut faire le meilleur travail pour vous.

Une autre fonction estconsole.table()qui imprime un joli tableau.

Nous avons juste besoin de lui passer un tableau d'éléments, et il imprimera chaque élément du tableau dans une nouvelle ligne.

Par exemple

console.table([[1, 2], ['x', 'y']])

ou vous pouvez également définir des noms de colonne, en passant à la place d'un tableau, un littéral d'objet, de sorte qu'il utilisera la propriété d'objet comme nom de colonne

console.table([
  { x: 1, y: 2, z: 3 },
  { x: 'First column', y: 'Second column', z: null }
])

Console logging with table

console.tablepeut également être plus puissant et si vous lui passez un objet littéral qui contient à son tour un objet, et que vous passez un tableau avec les noms de colonne, il imprimera une table avec les index de ligne tirés du littéral objet. Par exemple:

const shoppingCart = {}
shoppingCart.firstItem = { color: 'black', size: 'L' }
shoppingCart.secondItem = { color: 'red', size: 'L' }
shoppingCart.thirdItem = { color: 'white', size: 'M' }
console.table(shoppingCart, ['color', 'size'])

Filtering console logging

Enregistrement de différents niveaux d'erreur

Comme nous l'avons vu, console.log est idéal pour imprimer des messages dans la console.

Nous allons maintenant découvrir trois autres méthodes pratiques qui nous aideront à déboguer, car elles indiquent implicitement différents niveaux d'erreur.

Première,console.info ()

Comme vous pouvez le voir, un petit «i» est imprimé à côté, ce qui indique clairement que le message du journal n'est qu'une information.

Deuxième,console.warn ()

imprime un point d'exclamation jaune.

Si vous activez la barre d'outils de filtrage de la console, vous pouvez voir que la console vous permet de filtrer les messages en fonction du type, il est donc très pratique de différencier les messages car par exemple si nous cliquons maintenant sur `` Avertissements '', tous les messages imprimés qui ne sont pas des avertissements sera caché.

La troisième fonction estconsole.error ()

c'est un peu différent des autres car en plus d'imprimer un X rouge qui indique clairement qu'il y a une erreur, nous avons la trace complète de la pile de la fonction qui a généré l'erreur, afin que nous puissions essayer de la corriger.

Logging stack trace

Les messages de la console sont effacés à chaque navigation de page, sauf si vous cochez la caseConserver le journaldans les paramètres de la console:

Preserve log during navigation

Regroupement des messages de la console

Les messages de la console peuvent augmenter en taille et le bruit lorsque vous essayez de déboguer une erreur peut être écrasant.

Pour limiter ce problème, l'API de la console propose une fonctionnalité pratique: Regrouper les messages de la console.

Faisons d'abord un exemple.

console.group('Testing the location')
console.log('Location hash', location.hash)
console.log('Location hostname', location.hostname)
console.log('Location protocol', location.protocol)
console.groupEnd()

Logging groups

Comme vous pouvez le voir, la console crée un groupe, et là, nous avons les messages du journal.

Vous pouvez faire de même, mais afficher un message réduit que vous pouvez ouvrir à la demande, pour limiter davantage le bruit:

console.groupCollapsed('Testing the location')
console.log('Location hash', location.hash)
console.log('Location hostname', location.hostname)
console.log('Location protocol', location.protocol)
console.groupEnd()

Another example of logging in groups

Ce qui est bien, c'est que ces groupes peuvent être imbriqués, donc vous pouvez finir par faire

console.group('Main')
console.log('Test')
console.group('1')
console.log('1 text')
console.group('1a')
console.log('1a text')
console.groupEnd()
console.groupCollapsed('1b')
console.log('1b text')
console.groupEnd()
console.groupEnd()

Nesting groups

Imprimer la trace de la pile

Il peut y avoir des cas où il est utile d'imprimer la trace de la pile d'appels d'une fonction, peut-être pour répondre à la questioncomment avez-vous atteint cette partie du code?

Vous pouvez le faire en utilisantconsole.trace():

const function2 = () => console.trace()
const function1 = () => function2()
function1()

Print stack trace

Calculez le temps passé

Vous pouvez facilement calculer le temps d'exécution d'une fonction en utilisanttime()ettimeEnd()

const doSomething = () => console.log('test')
const measureDoingSomething = () => {
  console.time('doSomething()')
  //do something, and measure the time it takes
  doSomething()
  console.timeEnd('doSomething()')
}
measureDoingSomething()

Use console time

Générer un profil CPU

Les DevTools vous permettent d'analyser les performances du profil CPU de n'importe quelle fonction.

Vous pouvez démarrer cela manuellement, mais le moyen le plus précis de le faire est d'enrouler ce que vous souhaitez surveiller entre lesprofile()etprofileEnd()commandes. Ils sont similaires àtime()ettimeEnd(), sauf qu'ils ne mesurent pas seulement le temps, mais créent un rapport plus détaillé.

const doSomething = () => console.log('test')
const measureDoingSomething = () => {
  console.profile('doSomething()')
  //do something, and measure its performance
  doSomething()
  console.profileEnd()
}
measureDoingSomething()

Téléchargez mon gratuitManuel du débutant JavaScript