Konsole – Übersicht

  • Artikel
  • 7 Minuten Lesedauer

Die Konsole ähnelt einer intelligenten, umfangreichen Befehlszeile in DevTools und ist ein großartiges Begleittool für die Verwendung mit anderen Tools. Die Konsole bietet eine leistungsstarke Möglichkeit, Skriptfunktionen zu erstellen, die aktuelle Webseite zu prüfen und die aktuelle Webseite mit JavaScript zu bearbeiten.

Das Konsolentool hilft bei mehreren Aufgaben, die in den folgenden Artikeln ausführlicher behandelt werden:

Sie können das Konsolentool oben oder unten in DevTools öffnen. es wird hier im oberen Teil auf der Hauptsymbolleiste angezeigt:

Das Konsolentool wird im oberen Bereich geöffnet.

Die Konsole wird hier im unteren Teil von DevTools (der Schublade) angezeigt, wobei das Elementtool darüber geöffnet ist:

Die Konsole im unteren Bereich mit geöffnetem Elementtool darüber.

Die schnellste Möglichkeit zum direkten Öffnen der Konsole ist das Drücken Ctrl++Shift``J (Windows, Linux) oderJ Command+Option+(macOS).

Fehlerberichte und die Konsole

Die Konsole ist der Standardspeicherort, an dem JavaScript- und Verbindungsfehler gemeldet werden. Wenn Fehler auftreten, wird der Fehlerindikator neben dem Einstellungen-Symbol in DevTools angezeigt, das die Anzahl der Fehler und Warnungen bereitstellt. Klicken Sie auf den Fehlerindikator , um das Problemtool zu öffnen und das Problem anzuzeigen. Weitere Informationen finden Sie unter Beheben von JavaScript-Fehlern, die in der Konsole gemeldet werden.

DevTools enthält detaillierte Informationen zu dem Fehler in der Konsole:

DevTools enthält detaillierte Informationen zu dem Fehler in der Konsole.

Durchsuchen des Webs nach einer Konsolenfehlermeldungszeichenfolge

Suchen Sie im Web direkt in DevTools nach Ihren Konsolenfehlermeldungen . In der Konsole wird bei vielen Fehlermeldungen die Schaltfläche " Nach dieser Nachricht im Web suchen " angezeigt, die als Lupe angezeigt wird:

Die Schaltfläche "Im Web nach dieser Nachricht suchen" in einer Fehlermeldung in der Konsole.

Wenn Sie im Web auf die Schaltfläche "Nach dieser Nachricht suchen " klicken, wird im Browser eine neue Registerkarte geöffnet, in der Suchergebnisse für die Fehlermeldung angezeigt werden:

Die Suchergebnisseite auf einer neuen Registerkarte.

Überprüfen und Filtern von Informationen auf der aktuellen Webseite

Wenn Sie DevTools auf einer Webseite öffnen, gibt es möglicherweise eine überwältigende Menge an Informationen in der Konsole. Die Menge der Informationen wird zu einem Problem, wenn Sie wichtige Informationen identifizieren müssen. Verwenden Sie das Tool "Probleme " in DevTools, um die wichtigen Informationen anzuzeigen, die eine Aktion erfordern.

Probleme werden schrittweise von der Konsole in das Tool "Probleme " verschoben. In der Konsole gibt es jedoch immer noch viele Informationen, weshalb es ratsam ist, die automatisierten Protokoll- und Filteroptionen in der Konsole zu kennen. Weitere Informationen finden Sie unter Filtern von Konsolenmeldungen.

DevTools mit einer Konsole voller Nachrichten:

DevTools mit einer Konsole voller Nachrichten.

Protokollinformationen, die in der Konsole angezeigt werden sollen

Der häufigste Anwendungsfall für die Konsole ist das Protokollieren von Informationen aus Ihren Skripts mithilfe der console.log() Methode oder anderer ähnlicher Methoden.

Beispielcode

// prints the text to the console as  a log message
console.log('This is a log message');

// prints the text to the console as an informational message
console.info('This is some information'); 

// prints the text to the console as an error message
console.error('This is an error');

// prints the text to the console as a warning
console.warn('This is a warning');

// prints the geometry of the document body as an object
console.log(document.body.getBoundingClientRect());

// prints the geometry of the document body as a table
console.table(document.body.getBoundingClientRect());

// shows a list of techologies as a collapsed group
let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
console.groupCollapsed('Technolgies');
technologies.forEach(tech => {console.info(tech);})
console.groupEnd('Technolgies');

So protokollieren Sie Informationen, die in der Konsole angezeigt werden sollen:

  1. Öffnen Sie die Beispiele für Konsolenmeldungen der Demowebseite : Protokollieren, Informationen, Fehler und Warnungen in einem neuen Fenster oder einer neuen Registerkarte.

  2. Um die Konsole zu öffnen, drücken Sie Ctrl++Shift``J (Windows, Linux) oderJ Command+Option+(macOS).

    Die Konsole zeigt die resultierenden Meldungen an, die durch den Democode verursacht werden:

    Konsole voller Nachrichten, die durch Democode verursacht werden.

  3. Fügen Sie den obigen Code in die Konsole ein, und drücken Sie Enterdann .

    Wenn Sie eine Meldung erhalten: Uncaught SyntaxError: Identifier 'technologies' has already been declared

  4. Öffnen sie eine neue Registerkarte oder ein neues Fenster.

  5. Um die Konsole zu öffnen, drücken Sie Ctrl++Shift``J (Windows, Linux) oderJ Command+Option+(macOS).

  6. Fügen Sie den obigen Code in die Konsole ein, und drücken Sie Enterdann .

Viele nützliche Methoden sind verfügbar, wenn Sie mit der Konsole arbeiten. Weitere Informationen finden Sie unter "Protokollieren von Nachrichten im Konsolentool".

Testen Sie JavaScript live in der Konsole

Die Konsole ist nicht nur ein Ort zum Protokollieren von Informationen. Die Konsole ist eine REPL-Umgebung . Wenn Sie JavaScript in der Konsole schreiben, wird der Code sofort ausgeführt. Möglicherweise finden Sie es hilfreich, einige neue JavaScript-Features zu testen oder einige schnelle Berechnungen durchzuführen. Außerdem erhalten Sie alle Features, die Sie von einer modernen Bearbeitungsumgebung erwarten, z. B. autocompletion, Syntaxhervorhebung und Verlauf.

So führen Sie JavaScript in der Konsole aus:

  1. Öffnen Sie die Konsole.

  2. Geben Sie 2+2 ein.

Die Konsole zeigt das Ergebnis von live während der 2+2 Eingabe an und zeigt das Ergebnis 4 in der folgenden Zeile an:

Die Konsole zeigt das Ergebnis von 2+2 live während der Eingabe an.

Dieses Eiferauswertungsfeature ist nützlich, um zu debuggen und zu überprüfen, ob Sie in Ihrem Code keine Fehler machen.

Um den JavaScript-Ausdruck in der Konsole auszuführen und optional ein Ergebnis anzuzeigen, drücken Sie Enter. Anschließend können Sie den nächsten JavaScript-Code schreiben, der in der Konsole ausgeführt werden soll.

Ausführen mehrerer Zeilen von JavaScript-Code nacheinander:

Führen Sie mehrere Zeilen JavaScript-Code nacheinander aus.

Standardmäßig führen Sie JavaScript-Code in einer einzigen Zeile aus. Um eine Zeile auszuführen, geben Sie JavaScript ein, und drücken Sie Enterdann . Um die einzeilige Einschränkung zu umgehen, drücken Sie Shift+Enter anstelle von .Enter

Ähnlich wie bei anderen Befehlszeilenoberflächen drücken Arrow-UpSie , um auf Ihre vorherigen JavaScript-Befehle zuzugreifen. Das AutoCompletion-Feature der Konsole ist eine hervorragende Möglichkeit, sich über unbekannte Methoden zu informieren.

So versuchen Sie die automatische Vervollständigung:

  1. Öffnen Sie die Konsole.
  2. Geben Sie doc ein.
  3. Wählen Sie document aus dem Dropdownmenü aus.
  4. Drücken Sie Tab , um die Option auszuwählen document.
  5. Geben Sie .bo ein.
  6. Drücken Sie Tab , um die Option auszuwählen document.body.
  7. Geben Sie einen anderen . ein, um die vollständige Liste der Eigenschaften und Methoden anzuzeigen, die im Textkörper der aktuellen Webseite verfügbar sind.

Weitere Informationen zu allen Methoden zum Arbeiten mit Der Konsole finden Sie unter "Konsole als JavaScript-Umgebung".

Automatische Vervollständigung von JavaScript-Ausdrücken in der Konsole:

Automatische Konsolencompletion von JavaScript-Ausdrücken.

Interagieren mit der aktuellen Webseite im Browser

Die Konsole hat Zugriff auf das Window-Objekt des Browsers. Sie können Skripts schreiben, die mit der aktuellen Webseite interagieren, indem Sie Daten aus dem DOM lesen und DOM-Elementen Daten zuweisen.

Lesen aus der DOM-Struktur in der Konsole

So verwenden Sie einen JavaScript-Ausdruck zum Lesen von der aktuellen Seite, indem Sie ein ausgewähltes Element aus der DOM-Struktur lesen:

  1. Öffnen Sie die Konsole.

  2. Fügen Sie den folgenden Code in die Konsole ein, und drücken Sie Enterdann:

    document.querySelector('h1').innerHTML

    Dieser Ausdruck wählt die erste Überschriftenebene 1 aus dem DOM und dann den HTML-Inhalt aus, der zwischen den <h1> Start- und Endtags enthalten ist. Die Konsole zeigt die Ausgabe des Ausdrucks an, bei dem es sich um den Text der Überschrift handelt:

    Die Konsole zeigt die Ausgabe des Ausdrucks an, bei dem es sich um den Text der Überschrift handelt.

Sie haben aus der DOM-Darstellung der Webseite gelesen, indem Sie einen JavaScript-Ausdruck in die Konsole eingeben und die Ausgabe in der Konsole anzeigen.

Schreiben in die DOM-Struktur und Webseite über die Konsole

Sie können die gerenderte Webseite auch ändern, indem Sie das DOM (oder das Schreiben in das DOM) in der Konsole ändern.

So ändern Sie die gerenderte Webseite:

  1. Öffnen Sie die Konsole.

  2. Fügen Sie den folgenden Code in die Konsole ein, und drücken Sie Enterdann:

    document.querySelector('h1').innerHTML = 'Rocking the Console';

    Der obige JavaScript-Ausdruck verwendet das = Zeichen, um dem ausgewählten DOM-Element einen Wert zuzuweisen. Der ausgewertete Wert des Ausdrucks ist eine Zeichenfolge für eine Überschrift in diesem Beispiel. Der Wert des Ausdrucks (die Überschriftenzeichenfolge) wird sowohl in der Konsole als auch auf der gerenderten Webseite angezeigt:

    Schreiben Sie Text in das DOM in der Konsole.

    Sie haben die Hauptüberschrift der Webseite in "Rocking the Console" geändert.

Verwenden der $$ Console-Hilfsmethode zum

Die Methoden des Konsolendienstprogramms erleichtern den Zugriff auf und die Bearbeitung der aktuellen Webseite.

So fügen Sie beispielsweise einen grünen Rahmen um alle Links auf der aktuellen Webseite hinzu:

  1. Öffnen Sie die Konsole.

  2. Fügen Sie den folgenden Code in die Konsole ein, und drücken Sie Enterdann:

    $$('a').forEach(a => a.style.border='1px solid lime');

    Die $$(selector) Konsolenhilfsprogrammfunktion lautet "Abfrageauswahl alle". Diese DOM-Abfrageauswahlfunktion gibt ein Array aller Elemente zurück, die der angegebenen CSS-Auswahl entsprechen, wie die JavaScript-Funktion document.querySelectorAll(). In diesem Beispiel markieren wir alle <a> Hyperlinkelemente und wenden dann ein grünes Feld um sie an:

    Bearbeiten einer Auswahl von Elementen mithilfe der Konsole.

Weitere Informationen finden Sie unter Konsolentool-Hilfsfunktionen und Selektoren.

Weitere Informationen