JavaScript in der Console ausführen

Kayce Basques

In dieser interaktiven Anleitung erfahren Sie, wie Sie JavaScript in der Chrome-Konsole der Entwicklertools ausführen. Unter Erste Schritte mit dem Protokollieren von Nachrichten erfahren Sie, wie Sie Nachrichten in der Konsole protokollieren. Unter Erste Schritte mit dem Debuggen von JavaScript erfahren Sie, wie Sie JavaScript-Code anhalten und zeilenweise durchgehen.

Abbildung 1. Die Konsole.

Übersicht

Die Konsole ist eine REPL (Read-Evaluate-Print-Loop). Sie liest das JavaScript, das Sie eingeben, wertet den Code aus, gibt das Ergebnis Ihres Ausdrucksaus und kehrt dann zum ersten Schritt zurück.

Entwicklertools einrichten

Diese Anleitung ist so konzipiert, dass Sie die Demo öffnen und alle Workflows selbst ausprobieren können. Wenn Sie die Schritte selbst ausführen, können Sie sich die Workflows später besser merken.

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

   

   Abbildung 2. Diese Anleitung links und die Entwicklertools rechts.

JavaScript oder DOM der Seite ansehen und ändern

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

1. Sehen Sie sich den Text auf der Schaltfläche unten an.

   Hallo Welt!

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

   

   Abbildung 3. So sieht die Konsole aus, nachdem der Ausdruck oben ausgewertet wurde.

   Unter dem ausgewerteten Code sehen Sie "Hello, Console!". Erinnern Sie sich an die vier Schritte von REPL: lesen, auswerten, ausgeben, wiederholen. Nach der Auswertung des Codes gibt eine REPL das Ergebnis des Ausdrucks aus. Also muss "Hello, Console!" das Ergebnis der Auswertung von document.getElementById('hello').textContent = 'Hello, Console!' sein.

Beliebiges JavaScript ausführen, das nicht mit der Seite verknüpft ist

Manchmal möchten Sie einfach nur eine Code-Sandbox, in der Sie Code testen oder neue JavaScript-Funktionen ausprobieren können, mit denen Sie noch nicht vertraut sind. Die Konsole ist der perfekte Ort für solche Experimente.

1. Geben Sie 5 + 15 in die Konsole ein. Das Ergebnis 20 wird unter dem Ausdruck angezeigt, es sei denn, die Auswertung dauert zu lange.
2. Drücken Sie Enter, um den Ausdruck auszuwerten. Die Konsole gibt das Ergebnis des Ausdrucks unter dem Code aus. Abbildung 4 zeigt, wie die Konsole nach der Auswertung dieses Ausdrucks aussehen sollte.

3. Geben Sie den folgenden Code in die Konsole ein. Geben Sie ihn Zeichen für Zeichen ein, anstatt ihn zu kopieren und einzufügen.

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

4. Rufen Sie nun die gerade definierte Funktion auf.

   add(25);
   

   

   Abbildung 4. So sieht die Konsole aus, nachdem die Ausdrücke oben ausgewertet wurden.

   add(25) ergibt 45, da b standardmäßig auf 20 gesetzt ist, wenn die Funktion add ohne zweites Argument aufgerufen wird.

Sie können in dieser Konsolensitzung erst dann Code ausführen, wenn die Funktion zurückgegeben wurde. Wenn das zu lange dauert, können Sie den Task-Manager verwenden, um die zeitaufwendige Berechnung abzubrechen. Dadurch schlägt die aktuelle Seite jedoch fehl und alle eingegebenen Daten gehen verloren.

Nächste Schritte

Unter JavaScript ausführen finden Sie weitere Funktionen zum Ausführen von JavaScript in der Konsole.

Mit den Entwicklertools können Sie ein Skript mitten in der Ausführung anhalten. Während Sie angehalten sind, können Sie mit der Konsole das window oder DOM der Seite zu diesem Zeitpunkt ansehen und ändern. Das ist ein leistungsstarker Debugging-Workflow. Unter Erste Schritte mit dem Debuggen von JavaScript finden Sie eine interaktive Anleitung.

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

Außerdem bietet die Konsole eine Reihe von Hilfsfunktionen, die die Interaktion mit einer Seite erleichtern. Beispiel:

• Anstatt document.querySelector() einzugeben, um ein Element auszuwählen, können Sie $() eingeben. Diese Syntax ist von jQuery inspiriert, aber es ist nicht jQuery. Es ist nur ein Alias für document.querySelector().
• debug(function) setzt effektiv einen Breakpoint in der ersten Zeile dieser Funktion.
• keys(object) gibt ein Array mit den Schlüsseln des angegebenen Objekts zurück.

Unter Referenz zur Console Utilities API finden Sie alle Hilfsfunktionen.