JavaScript in der Console ausführen

Kayce Basques

In dieser interaktiven Anleitung erfahren Sie, wie Sie JavaScript in der Console der Chrome DevTools ausführen. Informationen zum Logging von Nachrichten in der Console finden Sie unter Erste Schritte mit dem Logging von Nachrichten. Unter Einführung in das JavaScript-Debugging erfahren Sie, wie Sie JavaScript-Code pausieren und Zeile für Zeile durchgehen.

Abbildung 1. Die Console

Übersicht

Die Console ist eine REPL (Read, Evaluate, Print, Loop). Es liest das eingegebene JavaScript, wertet den Code aus, gibt das Ergebnis des 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 die Schritte selbst ausführen, können Sie sich die Workflows später leichter 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 DevTools rechts.

JavaScript oder DOM der Seite ansehen und ändern

Beim Erstellen oder Entwickeln 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 die Console ein und drücken Sie die Eingabetaste, um den Ausdruck zu berechnen. Beachten Sie, wie sich der Text in der Schaltfläche ändert.

   

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

   Unter dem Code, den Sie ausgewertet haben, sehen Sie "Hello, Console!". Denken Sie an die vier Schritte der REPL: Lesen, Bewerten, Drucken, Schleifen. Nach der Auswertung des Codes gibt ein REPL das Ergebnis des Ausdrucks aus. "Hello, Console!" muss also das Ergebnis der Auswertung von document.getElementById('hello').textContent = 'Hello, Console!' sein.

Ausführen von beliebigem JavaScript, das nicht mit der Seite in Verbindung steht

Manchmal möchten Sie einfach nur einen Code-Spielplatz, auf dem Sie Code testen oder neue JavaScript-Funktionen ausprobieren können, mit denen Sie nicht vertraut sind. Die Console eignet sich hervorragend für diese Art von Tests.

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

3. Geben Sie den folgenden Code in die Konsole ein. Versuchen Sie, den Text einzeln einzugeben, anstatt ihn zu kopieren und einzufügen.

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

   Wenn Sie mit der Syntax von b=20 nicht vertraut sind, lesen Sie den Hilfeartikel Standardwerte für Funktionsargumente definieren.

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

   add(25);
   

   

   Abbildung 4. So sieht die Console nach der Auswertung der obigen Ausdrücke aus.

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

Sie können in dieser Konsolensession keinen Code ausführen, bis Ihre Funktion zurückgegeben wurde. Wenn das zu lange dauert, können Sie die zeitaufwendige Berechnung über den Task-Manager abbrechen. Dadurch wird jedoch auch die aktuelle Seite beendet und alle von Ihnen eingegebenen Daten gehen verloren.

Nächste Schritte

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

Mit den DevTools können Sie ein Script mitten in der Ausführung pausieren. Während der Pause können Sie in der Console die window oder DOM der Seite in diesem Moment aufrufen und ändern. Das ermöglicht einen leistungsstarken Ablauf für die Fehlerbehebung. Unter Erste Schritte mit dem JavaScript-Debugging finden Sie ein interaktives Tutorial.

Die Konsole unterstützt auch eine Reihe von Formatspezifiziern. Unter Nachrichten in der Console formatieren und formatieren finden Sie alle Methoden zum Formatieren und Stilisieren von Console-Nachrichten.

Außerdem bietet die Console eine Reihe von praktischen Funktionen, die die Interaktion mit einer Seite erleichtern. Beispiel:

• Anstatt document.querySelector() zu tippen, 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 einen Haltepunkt in der ersten Zeile dieser Funktion.
• keys(object) gibt ein Array mit den Schlüsseln des angegebenen Objekts zurück.

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