JavaScript in der Console ausführen

Kayce Basques

In dieser interaktiven Anleitung erfahren Sie, wie Sie JavaScript in der Chrome-Entwicklertools-Konsole ausführen. Unter Erste Schritte mit 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.

Die Console.

Abbildung 1. Console.

Überblick

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

Entwicklertools einrichten

Dieses Tutorial ist so konzipiert, dass Sie die Demo öffnen und alle Workflows selbst ausprobieren können. Wenn Sie die Schritte physisch befolgen, erinnern Sie sich wahrscheinlich später mit größerer Wahrscheinlichkeit an die Workflows.

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

    Dieses Tutorial links und die Entwicklertools auf der rechten Seite.

    Abbildung 2. Dieses Tutorial links und die Entwicklertools auf der rechten Seite.

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.

  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.

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

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

    Unterhalb des Codes, den Sie bewertet haben, sehen Sie "Hello, Console!". Erinnern Sie sich noch einmal an die vier Schritte des REPL: Lesen, Auswerten, Drucken, Schleifen. Nach der Auswertung des 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.

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 Konsole ist der perfekte Ort für solche Experimente.

  1. Geben Sie 5 + 15 in die Konsole ein. Das Ergebnis 20 wird unterhalb des Ausdrucks angezeigt, es sei denn, die Auswertung des Ausdrucks dauert zu lange.
  2. Drücken Sie Enter, um den Ausdruck auszuwerten. Die Console gibt das Ergebnis des Ausdrucks unter dem 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 die Console ein. Versuchen Sie, es Zeichen für Zeichen abzutippen, anstatt es zu kopieren und einzufügen.

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

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

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

    add(25);

    So sieht die Console nach der Auswertung der Ausdrücke oben aus.

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

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

Sie können in dieser Konsolensitzung keinen Code ausführen, bis Ihre Funktion zurückgegeben wurde. Wenn dies zu lange dauert, können Sie die zeitintensive Berechnung mit dem Task-Manager abbrechen. Allerdings führt dies auch dazu, dass die aktuelle Seite fehlschlägt und alle eingegebenen Daten verloren gehen.

Nächste Schritte

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

Mit den Entwicklertools kannst du ein Script mitten in der Ausführung pausieren. Während du pausiert bist, kannst du die Console verwenden, um die window oder DOM der Seite zu diesem Zeitpunkt aufzurufen und zu ändern. Dies ermöglicht einen leistungsstarken Workflow zur Fehlerbehebung. Eine interaktive Anleitung finden Sie unter Erste Schritte mit der JavaScript-Fehlerbehebung.

Die Console 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 einige praktische Funktionen, die die Interaktion mit einer Seite erleichtern. Beispiel:

  • Anstatt document.querySelector() zur Auswahl eines Elements einzugeben, können Sie $() eingeben. Diese Syntax wurde von jQuery inspiriert, ist aber nicht eigentlich jQuery. Es ist nur ein Alias für document.querySelector().
  • debug(function) setzt faktisch einen Haltepunkt in der ersten Zeile dieser Funktion.
  • keys(object) gibt ein Array zurück, das die Schlüssel des angegebenen Objekts enthält.

In der Console Utilities API-Referenz finden Sie alle Komfortfunktionen.