JavaScript in der Console ausführen

In dieser interaktiven Anleitung erfahren Sie, wie Sie JavaScript in der Chrome-Entwicklertools ausführen. Unter Erste Schritte mit dem Logging von Nachrichten erfahren Sie, wie Sie Nachrichten in der Console protokollieren. Unter Erste Schritte mit der Fehlerbehebung in JavaScript erfahren Sie, wie Sie JavaScript-Code pausieren und ihn Zeile für Zeile durchgehen.

Abbildung 1. Console:

Überblick

Die Console ist eine REPL, die für Read, Bewerten, Drucken und Loop steht. Er liest den JavaScript-Code, den Sie eingeben, wertet Ihren Code aus, druckt das Ergebnis Ihres Ausdrucks aus und kehrt dann zum ersten Schritt zurück.

Entwicklertools einrichten

In dieser Anleitung können Sie die Demo öffnen und alle Workflows selbst ausprobieren. Wenn Sie dem Ganzen folgen, erinnern Sie sich später eher an die Workflows.

1. Drücken Sie die Befehlstaste + Wahltaste + J (Mac) oder Strg + Umschalttaste + J (Windows, Linux, ChromeOS), um die Konsole direkt auf dieser Seite zu öffnen.

   

   Abbildung 2. links die Anleitung und rechts die Entwicklertools.

JavaScript oder DOM der Seite ansehen und ändern

Beim Erstellen oder Debuggen einer Seite ist es oft hilfreich, Anweisungen in der Console auszuführen, um das Aussehen oder die Ausführung der Seite zu ändern.

1. Beachten Sie den Text in der Schaltfläche unten.

   Hallo Welt!

2. Geben Sie document.getElementById('hello').textContent = 'Hello, Console!' in der Console ein und drücken Sie die Eingabetaste, um den Ausdruck auszuwerten. Achten Sie darauf, wie sich der Text innerhalb der Schaltfläche ändert.

   

   Abbildung 3. So sieht die Konsole nach der Auswertung des obigen Ausdrucks aus.

   Unter dem Code, den Sie ausgewertet haben, wird "Hello, Console!" angezeigt. Rufen Sie sich noch einmal die vier Schritte von REPL ins Gedächtnis: Lesen, Auswerten, Drucken, Schleifen. Nach der Auswertung Ihres Codes gibt eine REPL das Ergebnis des Ausdrucks aus. Daher muss "Hello, Console!" das Ergebnis der Auswertung von document.getElementById('hello').textContent = 'Hello, Console!' sein.

Beliebiges JavaScript ausführen, das nicht mit der Seite in Zusammenhang steht

Manchmal benötigen Sie lediglich einen Code-Playground, in dem Sie Code oder neue JavaScript-Funktionen ausprobieren können, mit denen Sie nicht vertraut sind. Die Konsole ist der ideale Ort für solche Tests.

1. Geben Sie 5 + 15 in der Console ein. Das Ergebnis 20 wird unter dem Ausdruck angezeigt (es sei denn, die Auswertung des Ausdrucks nimmt zu viel Zeit in Anspruch).
2. Drücken Sie Enter, um den Ausdruck auszuwerten. Die Console gibt das Ergebnis des Ausdrucks unter Ihrem Code aus. In Abbildung 4 unten sehen Sie, wie die Konsole nach der Auswertung dieses Ausdrucks aussehen sollte.

3. Geben Sie den folgenden Code in der Console ein. Schreiben Sie es Zeichen für Zeichen ein, anstatt es zu kopieren und einzufügen.

   function add(a, b=20) {
     return a + b;
   }
   

   Weitere Informationen zur b=20-Syntax finden Sie unter Standardwerte für Funktionsargumente definieren.

4. Rufen Sie nun die Funktion auf, die Sie gerade definiert haben.

   add(25);
   

   

   Abbildung 4. So sieht die Konsole nach der Auswertung der oben genannten Ausdrücke aus.

   add(25) wird als 45 ausgewertet, da beim Aufrufen der add-Funktion ohne ein zweites Argument b standardmäßig 20 verwendet wird.

Sie können in dieser Konsolensitzung keinen Code ausführen, bis Ihre Funktion zurückgegeben wurde. Sollte dies zu lange dauern, können Sie die zeitintensive Berechnung mit dem Task-Manager abbrechen. Allerdings schlägt die aktuelle Seite dann ebenfalls fehl und alle eingegebenen Daten gehen verloren.

Nächste Schritte

Weitere Funktionen zum Ausführen von JavaScript in der Console finden Sie unter JavaScript ausführen.

Mit den Entwicklertools können Sie ein Script während seiner Ausführung pausieren. Während Sie pausiert sind, können Sie die Konsole verwenden, um die window oder DOM der Seite zu diesem Zeitpunkt anzusehen und zu ändern. Dies ermöglicht einen leistungsfähigen Debugging-Workflow. Eine interaktive Anleitung finden Sie unter Erste Schritte beim Debugging von JavaScript.

Die Console unterstützt auch eine Reihe von Formatspezifizierern. Unter Nachrichten in der Console formatieren und gestalten erfahren Sie mehr über alle Methoden zum Formatieren und Gestalten von Konsolennachrichten.

Darüber hinaus verfügt die Console über eine Reihe praktischer Funktionen, die die Interaktion mit einer Seite vereinfachen. Beispiel:

• Anstatt document.querySelector() einzugeben, um ein Element auszuwählen, können Sie $() eingeben. Diese Syntax wurde von jQuery inspiriert, ist jedoch nicht tatsächlich jQuery. Es ist nur ein Alias für document.querySelector().
• debug(function) legt faktisch einen Haltepunkt in der ersten Zeile dieser Funktion fest.
• keys(object) gibt ein Array zurück, das die Schlüssel des angegebenen Objekts enthält.

In der Referenz zur Console Utilities API finden Sie alle praktischen Funktionen.