console.
Affiche des valeurs dans la console du navigateur. L’objet console a aussi les méthodes warn(), error(), table(), group(), time(), count() et assert().
- Renvoie
undefined
Exemple
#const user = { name: 'Léa', level: 7 }
const badges = ['Start', 'Série de 7 jours']
console.log('Bienvenue,', user.name)
console.log('Niveau :', user.level, 'Badges :', badges.length)
console.log(user)
console.log(badges)
console.info('Module 3 débloqué')
console.warn('Reste 2 unités de carburant')
console.error('Échec de l’enregistrement de la progression')Dans la console sous l’exemple, l’avertissement et l’erreur ont des couleurs différentes des entrées normales. Dans les outils de développement du navigateur, les objets et les tableaux peuvent en plus être dépliés.
Définition et utilisation
#La méthode console.log() affiche dans la console des outils de développement n’importe quelle valeur : chaînes, nombres, tableaux, objets ou éléments du DOM. Dans Chrome, vous ouvrez la console avec la touche F12 ou le raccourci Ctrl+Shift+J (Cmd+Option+J sur Mac). La méthode accepte plusieurs arguments et les affiche sur une seule ligne, séparés par des espaces. C’est le moyen le plus simple d’observer ce qui se passe dans un programme.
L’objet console a d’autres méthodes. console.info(), console.warn() et console.error() fonctionnent comme log(), mais signalent l’importance du message : les avertissements sont jaunes, les erreurs rouges, et les outils permettent de les filtrer. console.table() affiche un tableau d’objets sous forme de tableau visuel, et console.group() et console.groupEnd() regroupent des entrées dans un groupe repliable.
Pour traquer les bugs, les compteurs et les mesures de temps sont aussi utiles : console.count(étiquette) compte combien de fois un fragment de code s’est exécuté, console.time() et console.timeEnd() mesurent le temps entre deux points, et console.assert(condition, message) n’affiche une erreur que si la condition est fausse.
La console du navigateur montre les objets « en direct » : en dépliant un objet, vous voyez son état actuel, pas celui du moment où il a été affiché. Si vous avez besoin d’un instantané, affichez une copie, par exemple console.log(structuredClone(objet)) ou JSON.stringify(objet).
Syntaxe
#console.log(value1, value2, …)
console.info(…)
console.warn(…)
console.error(…)
console.table(data)
console.group(label)
console.groupEnd()
console.count(label)
console.time(label)
console.timeEnd(label)
console.assert(condition, message)Paramètres
#value1…valueN
valeurs quelconques
Les valeurs à afficher. Plusieurs arguments apparaissent sur une seule ligne, séparés par des espaces.data
tableau ou objet
Dansconsole.table(): les données à montrer dans le tableau, le plus souvent un tableau d’objets.label
chaîne, optionnel
L’étiquette d’un groupe, d’un compteur ou d’une mesure de temps. Les compteurs et les mesures sans étiquette utilisent le nom"default".condition
valeur quelconque
Dansconsole.assert(): la condition. Le message n’apparaît que si la condition est fausse.
Plus d’exemples
#const ranking = [
{ name: 'Léa', points: 320 },
{ name: 'Lucas', points: 280 },
{ name: 'Emma', points: 250 }
]
console.table(ranking)La console de cette page affiche les données comme console.log(). Dans les outils de développement du navigateur, vous verrez un vrai tableau avec les colonnes (index), name et points.
console.group('Module 1 : HTML')
console.log('Leçon 1 : Balises')
console.log('Leçon 2 : Attributs')
console.groupEnd()
for (const answer of ['A', 'C', 'A']) {
console.count(answer)
}
console.time('tri')
Array.from({ length: 10000 }, () => Math.random()).sort()
console.timeEnd('tri')Module 1 : HTML Leçon 1 : Balises Leçon 2 : Attributs A: 1 C: 1 A: 2 tri: 3.2109375 ms
La console de cette page ne gère pas ces méthodes, donc l’exemple ne s’exécute pas. Le résultat montre ce qu’affiche Chrome : les entrées du groupe sont indentées et peuvent être repliées, et le temps mesuré sera différent à chaque exécution.
function addPoints(user, points) {
console.assert(points > 0, `Nombre de points invalide : ${points}`)
user.points += points
}
const user = { name: 'Lucas', points: 100 }
addPoints(user, 20)
addPoints(user, -5)
console.log(user.points)Assertion failed: Nombre de points invalide : -5 115
Le résultat vient de la console de Chrome, car la console de cette page ne gère pas console.assert(). La méthode n’interrompt pas le programme, elle ne fait qu’afficher une erreur, donc les points ont quand même été retirés. Quand continuer n’a pas de sens, levez une exception avec throw.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Affichez les variables dans un objet :
console.log({ points, level })montre les noms avec les valeurs, par exemple{ points: 120, level: 3 }. - Observez les tableaux d’objets avec
console.table(). Comparer de nombreuses lignes dans un tableau est beaucoup plus facile qu’avec des objets repliés. - Avant de publier la page, supprimez les
console.log()inutiles. De nombreuses entrées ralentissent la page, et les données affichées peuvent être vues par quiconque ouvre la console.
Entrées associées
#- JSON.stringify()Transforme une valeur JavaScript, comme un objet ou un tableau, en chaîne de caractères au format JSON.
- structuredClone()Crée une copie profonde d’une valeur, y compris les objets imbriqués, les dates, les Map et les Set.
- Template literalsDes templates de texte entre guillemets inversés : ils insèrent des valeurs via ${} et peuvent s’étendre sur plusieurs lignes.
- ErrorUn objet d’erreur intégré avec un message et une pile d’appels. La base des exceptions et des classes d’erreurs personnalisées.
- try...catchCapture les erreurs levées dans un bloc try et les traite dans catch. Un finally optionnel s’exécute toujours.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.