Comprendre et utiliser l'API de la console Javascript en détail

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, notamment 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 log 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.

---

De ce fait, 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 a plus d'une clé et les valeurs de ces clés. Ces valeurs sont des fonctions.

On peut 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 en 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 < 0) {
        console.debug("Result is negative.");
    } else {
        console.debug("Result is zero.");
    }

    return result;
}


let result = subtract(10, 5);  

Sortie :

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

---

2. console.erreur()

C'est 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()

C'est une méthode utilisée en JavaScript pour imprimer des problèmes potentiels ou des situations qui nécessitent une attention 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 :

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!");

---

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, le résultat est présenté sous la forme d'une liste hiérarchique avec des triangles d'affichage qui vous permettent de voir le contenu des objets enfants.

Exemple :

console.error()
console.warn()

Sortie :

---

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 JavaScript Object 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 :

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 < 0) {
        console.debug("Result is negative.");
    } else {
        console.debug("Result is zero.");
    }

    return result;
}


let result = subtract(10, 5);  

Sortie :

---

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 :

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);

Sortie :

---

7. console.count()

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

Exemple :

  if (password.length < minLength) {
        console.warn("Warning: Password must be at least 8 characters long.");
        return false; 
    }

Sortie :

---

Conclusion

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!