Home-theater-designers
Die Webbrowser-Konsole ist eines der am häufigsten verwendeten Tools zum Debuggen von Frontend-Anwendungen. Die Konsolen-API bietet Entwicklern die Möglichkeit, Fehler zu beheben und Meldungen zu protokollieren.
Konsole.log() ist wahrscheinlich die am häufigsten verwendete Methode in der Konsolen-API, aber es gibt auch andere Methoden, die Sie in Ihrem Workflow verwenden können. Dieses Handbuch zeigt Ihnen die verschiedenen Methoden der Webbrowser-Konsole, mit denen Sie Ihren Debugging-Workflow verbessern können.
Warum ist die Protokollierung wichtig?
Die Protokollierung bei der Webbrowser-Konsole ist eine der besten Methoden zum Debuggen von Front-End- oder JavaScript-basierten Anwendungen.
Verwandte: 6 JavaScript-Frameworks, die es wert sind, gelernt zu werden
Die meisten modernen Webbrowser unterstützen die Konsolen-API, wodurch sie für Entwickler leicht verfügbar ist. Das Konsolenobjekt ist dafür verantwortlich, den Zugriff auf die Debugging-Konsole des Browsers bereitzustellen. Die Implementierung kann von Browser zu Browser unterschiedlich sein, aber die meisten Methoden funktionieren in allen modernen Browsern.
Spitze : Ihre Browserkonsole kann den gesamten in diesem Handbuch beschriebenen Code ausführen. Drücken Sie F12 auf Ihrer Tastatur, um die Tools der Browser-Entwickler in Chrome oder Firefox zu öffnen.
Zeichenfolgennachrichten protokollieren
Eine der gängigsten Konsolenmethoden ist Konsole.log() . Es gibt einfach eine Zeichenfolgennachricht oder einen Wert an die Webkonsole aus. Für einfache Werte oder Zeichenfolgennachrichten ist die Konsole.log() Methode ist wahrscheinlich die beste Option.
Möglichkeiten, mit Videospielen Geld zu verdienen
Um a . auszugeben Hallo Welt Nachricht können Sie Folgendes verwenden.
console.log(`Hello World`); Eine weitere Besonderheit des Konsole.log() Methode ist die Möglichkeit, die Ausgabe von DOM-Elementen oder die Struktur eines Teils einer Website zu drucken, um beispielsweise die Struktur des body-Elements und alles darin enthaltene auszugeben.
console.log(document.body) Die Ausgabe ist eine Sammlung von DOM-Elementen als HTML-Baum.
Interaktive JavaScript-Objekte protokollieren
Die konsole.dir () -Methode wird zum Protokollieren interaktiver Eigenschaften von JavaScript-Objekten verwendet. Sie können es beispielsweise verwenden, um die DOM-Elemente auf einer Webseite anzuzeigen.
Die typische Ausgabe der konsole.dir () -Methode besteht aus allen Eigenschaften des angegebenen JavaScript-Objekts im JSON-Format. Verwenden Sie die folgende Methode, um die Eigenschaften aller Elemente im Hauptteil einer HTML-Seite zu drucken:
console.dir(document.body) Ausdrücke auswerten
Sie kennen möglicherweise Assert-Methoden aus Unit-Tests – nun, die Konsole.assert() Methode funktioniert ähnlich. Verwenden Sie die Konsole.assert() Methode zum Auswerten eines Ausdrucks oder einer Bedingung.
Wenn die Assert-Methode fehlschlägt, gibt die Konsole eine Fehlermeldung aus; andernfalls wird nichts gedruckt. Verwenden Sie den folgenden Code, um zu bewerten, ob eine Person älter als 18 Jahre ist:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); Die obige Bestätigung schlägt fehl und eine entsprechende Fehlermeldung wird ausgegeben.
Protokollieren von Daten in Tabellen
Verwenden Sie die konsole.tabelle() -Methode, um Daten in einem Tabellenformat anzuzeigen. Gute Kandidaten für die Anzeige in Tabellenform sind Arrays oder Objektdaten.
Notiz : Einige Browser, wie Firefox, haben eine Höchstgrenze von 1.000 Zeilen, die mit dem . angezeigt werden können konsole.tabelle() Methode.
Angenommen, Sie haben das folgende Array von Autoobjekten:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Sie können das obige Array mit der folgenden Methode in einer Tabelle anzeigen:
console.table(cars); Protokollieren von Nachrichten nach Kategorie
Nachrichten der Webbrowser-Konsole werden hauptsächlich in drei Gruppen eingeteilt: Fehler, Warnung und Info.
Fehler
Um gezielt Fehlermeldungen an die Konsole zu drucken, indem Sie die Konsole.Fehler() Methode werden fehlerbezogene Meldungen in roter Schrift angezeigt.
console.error('error message'); Warnungen
Verwenden Sie zum Drucken von Warnungen Folgendes. Wie bei den meisten Szenarien werden Warnmeldungen in Orange angezeigt:
console.warn('warning message');Die Info
Um allgemeine Informationen an die Konsole zu drucken, verwenden Sie die konsole.info () Methode:
console.info('general info message') Es ist einfach, Nachrichten in der Browserkonsole zu filtern oder zu finden, wenn sie richtig kategorisiert sind.
Ablaufverfolgung des Programmablaufs
Verwenden Sie die Konsole.trace() -Methode, um einen Stack-Trace des Programmablaufs oder der Programmausführung zu drucken. Dies ist eine sehr nützliche Funktion zum Debuggen, da sie die Reihenfolge ausgibt, in der Funktionen in Ihrem Programm ausgeführt werden.
Zu sehen Konsole.trace() -Methode in Aktion können Sie drei Funktionen erstellen (wie unten beschrieben) und einen Stack-Trace in eine der Funktionen einfügen.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}Rufen Sie in Ihrer Browserkonsole auf oder triggern Sie FunktionEins() und Sie erhalten einen Stack-Trace der Funktionsaufrufe, die in der Last In First Out Order (LIFO) gedruckt werden, da es sich um einen Stack handelt.
Timing-Programmausführung
Um zu bestimmen, wie lange die Ausführung einer Operation in Ihrem Programm dauert, können Sie die Funktion Konsole.Zeit() Methode. Konsole.Zeit() wird normalerweise zusammen mit dem console.timeEnd () -Methode, bei der letztere verwendet wird, um den Timer zu beenden.
Sie können bis zu 10.000 Timer pro Webseite ausführen lassen, was die Bedeutung einer ordnungsgemäßen Kennzeichnung Ihrer Timer unterstreicht.
Um zu messen, wie lange eine for-Schleife braucht, um die Zahlen 1 bis 50.000 zu durchlaufen, können Sie den Timer wie folgt verwenden.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Zählen
Die console.count() -Methode wird verwendet, um zu verfolgen, wie oft eine Funktion oder ein Codeabschnitt in einem Programm aufgerufen wurde. Zum Beispiel können wir wie folgt verfolgen, wie oft eine for-Schleife ausgeführt wurde:
for(i=0; i<4; i++ ){
console.count();
}Gruppieren von Protokollnachrichten
Genau wie bei der Timer-Methode ist die Konsole.Gruppe () , und console.groupEnd () Methoden werden in der Regel paarweise verwendet.
Die Gruppenmethode hilft Ihnen, Ihre Protokollnachrichten besser zu organisieren. Beispielsweise können wir eine Gruppe von Warnmeldungen mit der Bezeichnung Warnungen wie folgt erstellen.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()Die beiden Meldungen innerhalb der Warngruppe werden visuell kategorisiert, wie in der folgenden Ausgabe zu sehen ist.
Löschen der Konsole
Zu guter Letzt gibt es mehrere Möglichkeiten, wie Sie Protokollnachrichten in Ihrer Browserkonsole löschen können.
Verwenden Sie die Konsole.clear() Methode wie folgt.
console.clear() Sie können die Browserkonsole auch mit Browser-Tastaturkürzeln löschen.
Google Chrome : Strg + L
Feuerfuchs : Strg + Umschalt + L
Volle Nutzung der Browser-Konsole
Dieses Handbuch hat Ihnen einige der verschiedenen verfügbaren Webbrowser-Konsolenmethoden gezeigt, die Ihnen beim Debuggen von Front-End-Anwendungen helfen. Die Konsolen-API ist sehr leichtgewichtig, leicht zu erlernen und wird in den meisten modernen Browsern umfassend unterstützt.
beste Seite um Filme kostenlos zu streamen
Machen Sie eine CAPTCHA-Validierung zu Ihrem nächsten Projekt und stellen Sie Ihre neuen Debugging-Fähigkeiten auf die Probe!
Teilen Teilen Tweet Email Erstellen Sie ein CAPTCHA-Validierungsformular mit HTML, CSS und JavaScriptSichern Sie Ihre Websites mit CAPTCHA-Validierung.
Weiter lesen Verwandte Themen- Programmierung
- Web Entwicklung
- JavaScript
Mwiza entwickelt von Beruf Software und schreibt ausgiebig über Linux und Frontend-Programmierung. Einige seiner Interessen umfassen Geschichte, Wirtschaft, Politik und Unternehmensarchitektur.
Mehr von Mwiza KumwendaAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um zu abonnieren