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. Unter Erste Schritte mit dem Logging von Nachrichten erfahren Sie, wie Sie Nachrichten in der Console protokollieren. Unter Erste Schritte mit der JavaScript-Fehlersuche erfahren Sie, wie Sie JavaScript-Code pausieren und den Code Zeile für Zeile durchgehen können.

Abbildung 1. Console.

Übersicht

Die Konsole ist eine REPL, die für Read, Bewerten, Print und Loop steht. 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 physisch befolgen, erinnern Sie sich wahrscheinlich später mit größerer Wahrscheinlichkeit an die Workflows.

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. Dieses Tutorial links und die Entwicklertools auf der rechten Seite.

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. Achten Sie auf 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 dann die Eingabetaste, um den Ausdruck auszuwerten. Beachten Sie, wie sich der Text innerhalb 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!". Erinnern Sie sich noch einmal an die vier Schritte der REPL: Lesen, Auswerten, 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.

Beliebigen JavaScript-Code ausführen, der nicht mit der Seite in Zusammenhang steht

Manchmal brauchen Sie einfach nur einen Playground, in 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 Konsole 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 Ihrem Code ausgegeben. Abbildung 4 unten zeigt, wie Ihre Console nach der Auswertung dieses Ausdrucks aussehen sollte.

3. Geben Sie den folgenden Code in die Console 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 Entwicklertools kannst du 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 Möglichkeiten, wie Sie Console-Nachrichten formatieren und formatieren können.

Außerdem bietet die Konsole einige praktische 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.