Si vous aimez mes articles, vous pouvez m'offrir un café :)

L'API de la console est utilisée pour le débogage, l'impression de messages et le transfert de diverses informations vers la console, en particulier dans les environnements d'exécution JavaScript tels que les navigateurs et Node.js. Mais pour utiliser correctement l'API de la console, vous devez savoir exactement ce qu'est l'API de la console.

Dans cet article, Je vais vous expliquer l'API de la console. L'API de la console est un objet. Cet objet a des clés, et lorsque vous écrivez une méthode console, vous accédez à la valeur d'une clé dans l'objet console.

Maintenant, je vais vous expliquer en codant mon propre objet console afin que vous puissiez comprendre la logique du fonctionnement de la méthode de journalisation dans l'API de la console.

const customConsole = {
    log: function(message) {
        const timestamp = new Date().toISOString();
        const output = `[${timestamp}] LOG: ${message}`;
        alert(output); // Displaying the output (replace with console.log in a real scenario)
    }
};

customConsole.log("Hello, this is a custom console log!");

Essayez de lire le code. Comme on peut le voir dans le code, j'ai créé un objet console personnalisé et défini une clé pour cet objet, et la valeur de cette clé est une fonction. Ensuite, j'ai accédé à la clé de journal de cet objet.

En conséquence, l'API de la console ne dispose pas seulement d'une méthode "log". Alors, combien y en a-t-il ? Découvrons-le maintenant.

Comme on le voit sur la photo, l'objet console possède plusieurs clés et les valeurs de ces clés. Ces valeurs sont des fonctions.

Nous pouvons accéder à ces fonctions avec l'objet console.

console.error()
console.warn()

Apprenons maintenant à quoi servent certaines de ces fonctions.

1. console.debug()

console.debug , une fonction JavaScript utilisée à des fins de débogage dans la console du navigateur. Par défaut, la sortie de la méthode console.debug() ne sera pas visible dans les outils de développement Chrome.

Exemple :

function subtract(a, b) {
    console.debug("subtract function called:", { a, b });
    const result = a - b;

    if (result > 0) {
        console.debug("Result is positive.");
    } else if (result 



Sortir : 



la sortie de la méthode console.debug() ne sera pas visible dans les outils de développement Chrome.



  
  
  2. console.erreur()


Il s'agit d'une méthode utilisée en JavaScript pour imprimer des messages d'erreur sur la console. Il est utilisé pour faciliter le débogage lorsqu'une erreur se produit. le message peut recevoir un formatage spécial, tel que des couleurs rouges et une icône d'erreur.

Exemple :


async function fetchData(ıd) {
    try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${ıd}`);

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        console.log("posts data fetched successfully:", data);
        return data;

    } catch (error) {
        console.error(" error posts data :", error.message);
    }
}

fetchData(1);





S'il y a une erreur lors de la récupération des données, voici le résultat : 





  
  
  3. console.warn()


Il s'agit d'une méthode utilisée dans JavaScript pour imprimer des problèmes potentiels ou des situations nécessitant une attention particulière sur la console. Il est utilisé pour faciliter le débogage lorsqu'une erreur se produit. le message peut recevoir un formatage spécial, tel que des couleurs jaunes et une icône d'avertissement.

Exemple :


  if (password.length 





  
  
  4. console.dir()


La méthode console.dir() affiche une liste des propriétés de l'objet JavaScript spécifié. Dans les consoles du navigateur, la sortie est présentée sous la forme d'une liste hiérarchique avec des triangles d'affichage qui vous permettent de voir le contenu des objets enfants.

Exemple :


const basket =  {
    name : "t-shirt",
    price : 100,
    quantity : 1,
    color : [ "blue" , "red" , "yellow"],
    size : [ "xs" , "s" , "m" , "l" , "xl"],
    total : function() {
        return this.price * this.quantity;
    }

}

console.dir(basket)
,
    taille : 
,
    total : fonction() {
        retourner ce.prix * cette.quantité ;
    }

}

console.dir(panier)




Sortir
 : 






  
  
  5. console.dirxml()


La méthode console.dirxml() affiche une arborescence interactive des éléments descendants de l'élément XML/HTML spécifié. S'il n'est pas possible d'afficher en tant qu'élément, la vue 
Objet JavaScript
 est affichée à la place. Le résultat est présenté sous la forme d'une liste hiérarchique de nœuds extensibles qui vous permettent de voir le contenu des nœuds enfants.


Exemple
 :
console.dirxml(document.body);


console.dirxml(document.body);




Sortir
 :






  
  
  6. console.assert()


La méthode 
console.assert()
 écrit un message d'erreur sur la console si l'assertion est fausse. Si l'affirmation est vraie, rien ne se passe.


Exemple
 :
console.dirxml(document.body);


consolle.assert("a" === "f" , message d'erreur)




Sortir
 : 






  
  
  7. console.count()


La méthode console.count() enregistre le nombre de fois que cet appel particulier à 
count()
 a été appelé.


Exemple
 :
console.dirxml(document.body);


fonction saluer (utilisateur) {
  console.count();
  return `salut ${user}` ;
}

saluer("Micheal");
saluer("romain");
saluer();
console.count();




Sortir
 : 






  
  
  Conclusion


Si une condition n'est pas vraie, il imprime un message d'erreur. Si la condition est vraie, rien n'est imprimé.