Konsole – Übersicht

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

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

• Spüren Sie Probleme auf , um herauszufinden, warum etwas im aktuellen Projekt nicht funktioniert. Weitere Informationen finden Sie unter Beheben von JavaScript-Fehlern, die in der Konsole gemeldet werden.
• Abrufen von Informationen über das Webprojekt im Browser als Protokollnachrichten. Weitere Informationen finden Sie unter Filtern von Konsolennachrichten.
• Protokollieren von Informationen in Skripts zu Debuggingzwecken. Weitere Informationen finden Sie unter Protokollieren von Nachrichten im Konsolentool.
• Try JavaScript expressions live in a REPL environment. Weitere Informationen findest du 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 der DevTools (dem Schnellansichtsbereich) angezeigt, mit dem Elementtool darüber:

Der schnellste Weg, die Konsole direkt zu öffnen, ist das Drücken von STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS).

Fehlerberichte und die Konsole

Die Konsole ist der Standardort, an dem JavaScript- und Verbindungsfehler gemeldet werden. 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:

Suchen Sie im Web nach einer Zeichenfolge für eine Konsolenfehlermeldung

Suchen Sie im Web nach Konsolenfehlermeldungen , direkt in DevTools. In der Konsole gibt es für viele Fehlermeldungen eine " Nach dieser Meldung suchen"-Schaltfläche auf der Web-Schaltfläche , die als Lupe dargestellt wird:

Wenn Sie im Web auf die Schaltfläche Nach dieser Meldung suchen klicken, wird eine neue Registerkarte im Browser geöffnet, die die Suchergebnisse für die Fehlermeldung anzeigt:

Untersuchen 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 an Informationen wird zum Problem, wenn Sie wichtige Informationen identifizieren müssen. Um die wichtigen Informationen anzuzeigen, die Aktionen erfordern, verwenden Sie das Problemetool in DevTools.

Probleme werden schrittweise von der Konsolein das Probleme-Tool 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 Konsolennachrichten.

DevTools mit einer Konsole voller Meldungen:

Protokollieren von Informationen, die in der Konsole angezeigt werden sollen

Der beliebteste 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 technologies as a collapsed group
let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
console.groupCollapsed('Technologies');
technologies.forEach(tech => {console.info(tech);})
console.groupEnd();

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

1. Öffnen Sie die Demo-Webseite Beispiele für Konsolennachrichten: Protokollieren, Info, Fehler und Warnen 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).

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

   

3. Fügen Sie den obigen Code in die Konsole ein, und drücken Sie 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 die EINGABETASTE.

Bei der Arbeit mit der Konsole stehen viele nützliche Methoden zur Verfügung. 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. Es kann hilfreich sein, einige neue JavaScript-Features zu testen oder einige schnelle Berechnungen durchzuführen. Außerdem erhalten Sie alle Funktionen, die Sie von einer modernen Bearbeitungsumgebung erwarten, wie Autovervollständigung, Syntaxhervorhebung und Verlauf.

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

1. Öffnen Sie die Konsole.

2. Geben Sie 2+2 ein.

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

Dieses Eifrig-Auswertungsfeature ist nützlich, um zu debuggen und sicherzustellen, dass Sie keine Fehler in Ihrem Code machen.

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

Ausführen mehrerer Zeilen JavaScript-Code nacheinander:

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

Wie bei anderen Befehlszeilenoberflächen drücken Sie die NACH-OBEN-TASTE, um auf Ihre vorherigen JavaScript-Befehle zuzugreifen. Das Autovervollständigungsfeature der Konsole ist eine großartige Möglichkeit, unbekannte Methoden kennenzulernen.

So testen Sie die automatische Vervollständigung:

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

Weitere Informationen zu allen Möglichkeiten zum Arbeiten mit der Konsole finden Sie unter Konsole als JavaScript-Umgebung.

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

Mit der aktuellen Webseite im Browser interagieren

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 aus durch Lesen eines ausgewählten Elements aus der DOM-Struktur:

1. Öffnen Sie die Konsole.

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

   document.querySelector('h1').innerHTML
   

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

   

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

Schreiben in die DOM-Struktur und die Webseite von der Konsole aus

Sie können auch die gerenderte Webseite ändern, indem Sie das DOM ändern (oder in das DOM schreiben ), und zwar von der Konsole aus.

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 die EINGABETASTE:

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

   Der obige JavaScript-Ausdruck verwendet das = Vorzeichen, 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 Hauptüberschrift der Webseite in "Rocking the Console" geändert.

Verwenden der $$-Konsolendienstmethode

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

Um beispielsweise einen grünen Rahmen um alle Links auf der aktuellen Webseite hinzuzufügen:

1. Öffnen Sie die Konsole.

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

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

   Die $$(selector) Funktion des Konsolendienstprogramms ist "Alle auswählen". Diese DOM-Abfrageselektorfunktion gibt ein Array aller Elemente zurück, die dem angegebenen CSS-Selektor entsprechen, z. B. die JavaScript-Funktion document.querySelectorAll(). In diesem Beispiel markieren Sie alle <a> Hyperlink-Elemente und wenden dann ein grünes Feld um sie herum an:

   

Weitere Informationen finden Sie unter Hilfsfunktionen 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