Il est difficile d'imaginer un développement sur JS sans produire d'informations sur la console. Métaphoriquement parlant, console.log () est le remède à la plupart des maladies du code.

Le débogage, c'est presque comme enquêter sur un crime dont vous êtes aussi le principal coupable - Filipe Fortes

Mais outre la fonction console.log () couramment utilisée, il existe de nombreux autres outils qui peuvent grandement simplifier le processus. Regardons certains d'entre eux avec des exemples simples.

console.log (), .info (), .debug (), .warn (), .error ()

Le plus simple est d'imprimer la ligne avec une couleur correspondant au type d'événement.

Nous utilisons des espaces réservés

Afin de remplacer des données dans une ligne par un message, il est plus pratique d'utiliser des espaces réservés.

% o - pour l'objet
% s - pour la chaîne
% d - pour décimal ou entier

Ajouter CSS

Pas assez d'informations / avertir / erreur? Peu importe! Vous pouvez appliquer CSS aux messages de la console.

Vous souhaitez appliquer CSS à une partie seulement du message? Cela se fait comme ceci:

console.dir ()

Il est souvent beaucoup plus pratique d'imprimer une représentation JSON de l'objet qui nous intéresse.

Sortie HTML

Les éléments HTML de la console peuvent être examinés de la même manière que dans l'inspecteur.

console.table ()

Vous voulez voir rapidement les données dans une liste de JSON?

console.group () et console.groupEnd ()

Les messages de la console peuvent être regroupés pour plus de commodité.

console.count ()

Cette fonction enregistre combien de fois elle a été appelée.

Si l' étiquette d' argument facultative est passée, la fonction enregistrera le nombre d'appels avec la même étiquette .

Si la fonction est appelée sans paramètres, elle enregistrera le nombre d'appels sur la même ligne .

console.assert ()

Il est pratique à utiliser lorsque vous souhaitez afficher des informations par condition. Seuls les messages où le premier argument de assert () est faux seront imprimés.

console.trace ()

Cette méthode vous aidera à comprendre comment le code a atteint un certain point.

console.time ()

La façon la plus simple de mesurer le temps d'exécution d'un morceau de code.

console.memory

Vous voulez enfin savoir où est passée toute la RAM gratuite?

console.clear ()

Utilisez pour commencer avec une table rase. Efface complètement la console des messages précédents.

// time and time end console.time("This"); let total = 0; for (let j = 0; j < 10000; j++) { total += j } console.log("Result", total); console.timeEnd("This"); // Memory console.memory // Assertion const errorMsg = 'Hey! The number is not even'; for (let number = 2; number <= 5; number += 1) { console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg}); } // Count for (let i = 0; i < 11; i++) { console.count(); } // group & groupEnd console.group(); console.log('Test message'); console.group(); console.log('Another message'); console.log('Something else'); console.groupEnd(); console.groupEnd(); // Table const items = [ { name: "chair", inventory: 5, unitPrice: 45.99 }, { name: "table", inventory: 10, unitPrice: 123.75 }, { name: "sofa", inventory: 2, unitPrice: 399.50 } ]; console.table(items) // Clear console.clear() // HTML Element let element = document.getElementsByTagName("BODY")[0]; console.log(element) // Dir const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"} console.dir(userInfo); // Color console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small'); // pass object, variable const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"} console.log("Hey %s, here is your details %o in form of object", "John", userDetails); // Default console.log('console.log'); console.info('console.info'); console.debug('console.debug'); console.warn('console.warn'); console.error('console.error');