Konsole – Übersicht

Die Konsole ist wie eine intelligente, umfangreiche Befehlszeile in DevTools und ist ein hervorragendes Begleittool für die Verwendung mit anderen Tools. Die Konsole bietet eine leistungsstarke Möglichkeit, Skriptfunktionen zu erstellen, die aktuelle Webseite zu untersuchen und die aktuelle Webseite mithilfe von JavaScript zu bearbeiten.

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

• Ermitteln Sie Probleme , um herauszufinden, warum etwas im aktuellen Projekt nicht funktioniert. Weitere Informationen finden Sie unter Beheben von JavaScript-Fehlern, die in der Konsole gemeldet werden.
• Rufen Sie Informationen zum Webprojekt im Browser als Protokollmeldungen ab. Weitere Informationen finden Sie unter Filtern von Konsolenmeldungen.
• Protokollinformationen in Skripts zu Debugzwecken. Weitere Informationen finden Sie unter Protokollieren von Meldungen im Konsolentool.
• Testen Sie JavaScript-Ausdrücke live in einer REPL-Umgebung . Weitere Informationen finden Sie unter Ausführen von JavaScript in der Konsole.
• Interagieren Sie mit dem Webprojekt im Browser mithilfe von JavaScript. Weitere Informationen finden Sie unter Interagieren mit dem DOM über die Konsole.

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

Die Konsole wird hier im unteren Teil von DevTools (dem Bereich Schnellansicht ) angezeigt, über dem das Tool Elemente geöffnet ist:

Die schnellste Möglichkeit, die Konsole direkt zu öffnen, besteht darin, STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS) zu drücken.

Fehlerberichte und die Konsole

Die Konsole ist der Standardort, an dem JavaScript- und Konnektivitätsfehler gemeldet werden. Weitere Informationen finden Sie unter Beheben von JavaScript-Fehlern, die in der Konsole gemeldet werden.

DevTools enthält ausführliche Informationen zum Fehler in der Konsole:

Suchen im Web nach einer Konsolen-Fehlermeldungszeichenfolge

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

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:

Ü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. Um die wichtigen Informationen anzuzeigen, die eine Aktion erfordern, verwenden Sie das Tool Probleme in DevTools.

Probleme werden schrittweise von der Konsole in das Problemtool verschoben. Es gibt jedoch immer noch viele Informationen in der Konsole, weshalb es eine gute Idee 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:

Protokollinformationen, die in der Konsole angezeigt werden sollen

Der am häufigsten verwendete Anwendungsfall für die Konsole ist die Protokollierung 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 Demowebseite Konsolenmeldungen beispiele: Protokoll, Informationen, Fehler und Warnung in einem neuen Fenster oder einer neuen Registerkarte.

2. Um die Konsole zu öffnen, drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS).

   In der Konsole werden die resultierenden Meldungen angezeigt, die durch den Democode verursacht werden:

   

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

   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 STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS).

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

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

Testen Sie Ihr 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 ist 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. automatische Vervollständigung, Syntaxheraushebung und Verlauf.

So versuchen Sie, JavaScript in der Konsole auszuführen:

1. Öffnen Sie die Konsole.

2. Geben Sie 2+2 ein.

In der Konsole wird das Ergebnis von 2+2 live angezeigt, während Sie es eingeben, und das Ergebnis 4 wird in der folgenden Zeile angezeigt:

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

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

Ausführen mehrerer JavaScript-Codezeilen nacheinander:

Standardmäßig führen Sie JavaScript-Code in einer einzelnen Zeile aus. Um eine Zeile auszuführen, geben Sie JavaScript ein, und drücken Sie dann die EINGABETASTE. Um die einzeilige Einschränkung zu umgehen, drücken Sie UMSCHALT+EINGABETASTE anstelle der EINGABETASTE.

Ähnlich wie bei anderen Befehlszeilenfunktionen drücken Sie die NACH-OBEN-TASTE, um auf Ihre vorherigen JavaScript-Befehle zuzugreifen. Das AutoVervollständigen-Feature der Konsole ist eine hervorragende Möglichkeit, um 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 die TAB-TASTE , um auszuwählen document.
5. Geben Sie .bo ein.
6. Drücken Sie die TAB-TASTE , um auszuwählen document.body.
7. Geben Sie eine andere . 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 Möglichkeiten, mit der Konsole zu arbeiten, finden Sie unter Konsole als JavaScript-Umgebung.

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

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, um von der aktuellen Seite zu lesen, 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 dann die EINGABETASTE:

   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. In der Konsole wird die Ausgabe des Ausdrucks angezeigt, 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 eingegeben und die Ausgabe in der Konsole angezeigt haben.

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

Sie können die gerenderte Webseite auch ändern, indem Sie das DOM (oder schreiben sie 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 dann die EINGABETASTE:

   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 in diesem Beispiel eine Zeichenfolge für eine Überschrift. Der Wert des Ausdrucks (die Überschriftenzeichenfolge) wird sowohl in der Konsole als auch auf der gerenderten Webseite angezeigt:

   

   Sie haben die Standard Überschrift der Webseite in Rocking the Console geändert.

Verwenden der $$-Konsolenhilfsprogrammmethode für

Die Konsolen-Hilfsprogramm-Methoden 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 dann die EINGABETASTE:

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

   Die $$(selector) Konsolen-Hilfsprogrammfunktion ist "Abfrageauswahl alle". Diese DOM-Abfrageauswahlfunktion gibt ein Array aller Elemente zurück, die dem angegebenen CSS-Selektor entsprechen, z. B. die JavaScript-Funktion document.querySelectorAll(). In diesem Beispiel markieren wir alle <a> Hyperlinkelemente und wenden dann ein grünes Feld um sie herum an:

   

Weitere Informationen finden Sie unter Funktionen und Selektoren des Konsolentools.

Weitere Informationen

• Interagieren Sie mit dem DOM über die Konsole.
• Referenz zu Konsolenfeatures
• Api-Referenz für Konsolenobjekt
• Hilfsfunktionen und Selektoren des Konsolentools