Angular-console.log-Funktion

In diesem Artikel wird das vollständige Konzept der Angular-Datei console.log erläutert.

die Funktion console.log in Angular

console.log ist eine JavaScript-Funktion, die Nachrichten an die Entwicklerkonsole oder die Browserkonsole an die Webseite protokolliert.

Diese Methode hilft Angular-Entwicklern, indem sie sie über Fehler, Warnungen und was während der Ausführung ihres Codes passiert, informiert.

Es wird verwendet, um eine Angular-Anwendung zu debuggen, Leistungsprobleme zu identifizieren und Probleme mit Bibliotheken von Drittanbietern oder anderen Abhängigkeiten zu beheben.

Wir können auf diese Funktion zugreifen, indem wir die Entwicklertools in einem beliebigen Browser öffnen und zur Registerkarte Konsole navigieren. Wir finden es auch in Android Studio unter Ansicht > Werkzeugfenster > Andere > Konsole.

console.log-Meldungen werden immer mit einem Zeitstempel, einer Ebene und einer Meldung in Klammern geschrieben. Die Meldung hängt von der Art des Protokolls ab.

Die Ebene kann eine der folgenden sein.

• Debug: Dies dient zu Debugging-Zwecken und sollte nach Möglichkeit vermieden werden.
• Error: Ein Laufzeitfehler ist aufgetreten und wird die Ausführung Ihres Codes stoppen, bis Sie ihn beheben.
• Info: Dies dient zu Informationszwecken und stoppt nicht die Ausführung Ihres Codes.

Bevor wir einen Code mit console.log schreiben, müssen wir zuerst ein neues Angular-Projekt erstellen, indem wir die folgenden Befehle im Terminal eingeben.

ng new my-project
cd my-project
ng serve

Als nächstes öffnen wir unseren Browser und gehen zu http://localhost:4200/, wo wir einen leeren Bildschirm sehen.

Lassen Sie uns nun Code mit console.log in Angular schreiben.

TypeScript-Code:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent{
    console = console;
}

HTML Quelltext:

<h2>Example of Angular Console log</h2>
<p>
    press F12 and then run the code
</p>

{{ console.error('It will show up an error') }}
{{ console.log('It will show up logging') }}

Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.