Bonjour mes amis!
Dans cette courte note, je souhaite partager avec vous des informations sur certaines méthodes de l'objet Console qui peuvent être utilisées avec console.log ().
Une liste complète des méthodes peut être trouvée
ici .
Des mots à l'action. Oui, Chrome sera utilisé pour fonctionner.
Console.debug () et console.info ()
Console.debug () et console.info () sont utilisés pour produire des messages d'information sur la console et, en fait, sont des analogues de console.log (). L'une des fonctionnalités de console.debug () est que le message affiché par cette méthode ne s'affiche que si la console est configurée pour afficher les messages de niveau de débogage (pour Chrome, la case à cocher Verbose possède un onglet Niveaux).
Créons quelques objets:
const harry = { name: 'Harry', age: 28, married: false, job: 'developer', salary: 300, }, alice = { name: 'Alice', age: 23, married: false, job: 'manager', salary: 100, }, bob = { name: 'Bob', age: 32, married: true, job: 'tester', salary: 200 }
Listez-les dans la console en utilisant console.log (harry, alice, bob):
Maintenant, en utilisant console.debug (), en fournissant des informations supplémentaires ("\ n" est le caractère de contrôle pour le saut de ligne, l'espace au début est pour l'alignement):
console.debug( ' The first employee is', harry.name, '\n The second employee is', alice.name, '\n The third employee is', bob.name )
Nous obtenons ce qui suit:
Enfin, en utilisant console.info (), en utilisant des caractères génériques ("% s" est une chaîne, "% d" est un nombre, "% s" est une directive pour appliquer des styles):
console.info(' This is %c%s%c. \n He\'s %d years old. \n He\'s %s. \n He works as %s. \n His salary is %d.', 'font-size: 1.2em; font-weight: 600; color: deepskyblue; text-decoration: underline;', harry.name, '', harry.age, harry.married ? 'married' : 'not married', harry.job, harry.salary)
Résultat (notez le «Harry» que nous avons enveloppé dans% c):
Console.count ()
Console.count () affiche le nombre d'appels de méthode avec une étiquette spécifique (passée dans le paramètre de méthode). Pour réinitialiser le compteur avec la valeur donnée, utilisez console.countReset ().
Un exemple légèrement modifié avec MDN:
let user = '' function greet() { console.count(user) return 'hi ' + user } user = 'bob' greet() user = 'alice' greet() greet() console.count('alice')
Nous voyons ce qui suit:
Personnellement, je n'ai pas pu utiliser cette méthode, mais l'occasion m'a paru intéressante.
Console.group ()
Console.group () est utilisé pour regrouper les messages (avec un décalage vers la droite d'un niveau). Les groupes peuvent recevoir des noms. Pour fermer le groupe, utilisez console.groupEnd (). Console.groupCollapsed () fait la même chose que console.group (), mais la sortie est dans un groupe minimisé (nous travaillons avec des objets créés précédemment):
console.groupCollapsed('harry') console.log(harry.name) console.log(harry.age) console.log(harry.married) console.log(harry.job) console.log(harry.salary) console.groupEnd() console.groupCollapsed('alice') console.log(alice.name) console.log(alice.age) console.log(alice.married) console.log(alice.job) console.log(alice.salary) console.groupEnd() console.groupCollapsed('bob') console.log(bob.name) console.log(bob.age) console.log(bob.married) console.log(bob.job) console.log(bob.salary) console.groupEnd()
Nous obtenons:
Console.table ()
Console.table () affiche les données dans un tableau.
Créez un tableau d'objets:
let staff = [{ name: 'Harry', age: 29, married: false, job: 'developer', salary: 'many', }, { name: 'Alice', age: 23, married: false, job: 'manager', salary: 'few' }, { name: 'Bob', age: 32, married: true, job: 'tester', salary: 'medium' } ]
Dérivez-le en utilisant console.log (stuff):
Pas très clair, d'accord.
Maintenant, en utilisant console.table (stuff):
Une toute autre affaire.
Console.time ()
Console.time () démarre une minuterie avec le nom du paramètre passé. Le minuteur est arrêté à l'aide de console.timeEnd (). Pour corriger les valeurs intermédiaires, utilisez console.timeLog ():
console.time('time')
Résultat:
Console.trace ()
Console.trace () imprime une trace de pile. Il peut être utilisé pour déterminer la séquence d'appels de fonction.
Un exemple légèrement modifié avec MDN:
foo() function foo() {
Résultat:
Lui-même n'a jamais utilisé, mais a pris des notes.
C’est tout pour moi. Mes meilleurs vœux.