Heim > Web-Frontend > js-Tutorial > Hauptteil

Verstehen und Verwenden der Javascript Console API im Detail

Patricia Arquette
Freigeben: 2024-10-24 08:22:29
Original
184 Leute haben es durchsucht

Wenn Ihnen meine Artikel gefallen, können Sie mir einen Kaffee spendieren :)
Understanding and Using Javascript Console API in Detail


Die Konsolen-API wird zum Debuggen,Drucken von Nachrichten und zum Übertragen verschiedener Informationen an die Konsole verwendet, insbesondere in JavaScript-Laufzeiten wie Browsern und Node.js. Um die Konsolen-API jedoch korrekt verwenden zu können, müssen Sie genau wissen, was die Konsolen-API ist.

In diesem Artikel erkläre ich Ihnen die Konsolen-API. Konsolen-API ist ein Objekt. Dieses Objekt verfügt über Schlüssel, und wenn Sie eine Konsolenmethode schreiben, greifen Sie auf den Wert eines Schlüssels im Konsolenobjekt zu.


Jetzt werde ich es Ihnen erklären, indem ich mein eigenes Konsolenobjekt codiere, damit Sie die Logik verstehen können, wie die Protokollmethode in der Konsolen-API funktioniert.

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

Nach dem Login kopieren
Nach dem Login kopieren

Versuchen Sie, den Code zu lesen. Wie im Code zu sehen ist, habe ich ein benutzerdefiniertes Konsolenobjekt erstellt und einen Schlüssel für dieses Objekt definiert, und der Wert dieses Schlüssels ist eine Funktion. Dann habe ich auf den Protokollschlüssel dieses Objekts zugegriffen.


Aus diesem Grund verfügt die Konsolen-API nicht nur über eine „Protokoll“-Methode. Wie viele sind es also? Finden wir es jetzt heraus.

Understanding and Using Javascript Console API in Detail

Wie auf dem Foto zu sehen ist, verfügt das Konsolenobjekt über mehr als einen Schlüssel und die Werte dieser Schlüssel. Diese Werte sind Funktionen.

Auf diese Funktionen können wir mit dem Konsolenobjekt zugreifen.

console.error()
console.warn()
Nach dem Login kopieren
Nach dem Login kopieren

Jetzt lernen wir, was einige dieser Funktionen bewirken.


1. console.debug()

console.debug , eine Funktion in JavaScript, die für Debugging-Zwecke in der Browserkonsole verwendet wird. Standardmäßig ist die Ausgabe der Methode console.debug() in den Chrome-Entwicklertools nicht sichtbar.

Beispiel :

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);  
Nach dem Login kopieren
Nach dem Login kopieren

Ausgabe:

Understanding and Using Javascript Console API in Detail

Die Ausgabe der Methode console.debug() ist in den Chrome-Entwicklertools nicht sichtbar.


2. console.error()

Es handelt sich um eine in JavaScript verwendete Methode, um Fehlermeldungen an die Konsole zu drucken. Es wird verwendet, um das Debuggen zu erleichtern, wenn ein Fehler auftritt. Die Nachricht erhält möglicherweise eine spezielle Formatierung, z. B. rote Farben und ein Fehlersymbol.

Beispiel :

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

Nach dem Login kopieren
Nach dem Login kopieren

Wenn beim Abrufen der Daten ein Fehler auftritt, ist dies die Ausgabe:

Understanding and Using Javascript Console API in Detail


3. console.warn()

Es handelt sich um eine Methode, die in JavaScript verwendet wird, um potenzielle Probleme oder Situationen, die Aufmerksamkeit erfordern, auf der Konsole auszudrucken. Es wird verwendet, um das Debuggen zu erleichtern, wenn ein Fehler auftritt. Die Nachricht erhält möglicherweise eine spezielle Formatierung, z. B. gelbe Farben und ein Warnsymbol.

Beispiel :

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

Nach dem Login kopieren
Nach dem Login kopieren

4. console.dir()

Die Methode console.dir() zeigt eine Liste der Eigenschaften des angegebenen JavaScript-Objekts an. In Browserkonsolen wird die Ausgabe als hierarchische Auflistung mit Dreieckssymbolen dargestellt, mit denen Sie den Inhalt untergeordneter Objekte sehen können.

Beispiel :

console.error()
console.warn()
Nach dem Login kopieren
Nach dem Login kopieren

Ausgabe:

Understanding and Using Javascript Console API in Detail


5. console.dirxml()

Die Methode console.dirxml() zeigt einen interaktiven Baum der Nachkommenelemente des angegebenen XML/HTML-Elements an. Wenn die Anzeige als Element nicht möglich ist, wird stattdessen die Ansicht JavaScript-Objekt angezeigt. Die Ausgabe wird als hierarchische Liste erweiterbarer Knoten dargestellt, mit der Sie den Inhalt untergeordneter Knoten sehen können.

Beispiel :

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);  
Nach dem Login kopieren
Nach dem Login kopieren

Ausgabe :

Understanding and Using Javascript Console API in Detail


6. console.assert()

Die Methode console.assert() schreibt eine Fehlermeldung an die Konsole, wenn die Behauptung falsch ist. Wenn die Behauptung wahr ist, passiert nichts.

Beispiel :

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

Nach dem Login kopieren
Nach dem Login kopieren

Ausgabe:

Understanding and Using Javascript Console API in Detail


7. console.count()

Die Methode console.count() protokolliert, wie oft dieser bestimmte Aufruf von count() aufgerufen wurde.

Beispiel :

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

Ausgabe:

Understanding and Using Javascript Console API in Detail


Abschluss

Wenn eine Bedingung nicht wahr ist, wird eine Fehlermeldung ausgegeben. Wenn die Bedingung wahr ist, wird nichts gedruckt.

Das obige ist der detaillierte Inhalt vonVerstehen und Verwenden der Javascript Console API im Detail. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!