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.
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.
Drücken Sie Befehlstaste+Wahltaste+J (Mac) oder Strg+Umschalt+J (Windows, Linux, ChromeOS), um die Konsole direkt hier 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 Debuggen einer Seite ist es oft hilfreich, Anweisungen in der Console auszuführen, um das Aussehen oder die Ausführung der Seite zu ändern.
Beachten Sie den Text in der Schaltfläche unten.
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 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 vondocument.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.
- Geben Sie
5 + 15
in die Konsole ein. Das Ergebnis20
wird unterhalb des Ausdrucks angezeigt, es sei denn, die Auswertung des Ausdrucks dauert zu lange. - 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. 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.Rufen Sie nun die Funktion auf, die Sie gerade definiert haben.
add(25);
Abbildung 4. So sieht die Console nach der Auswertung der Ausdrücke oben aus.
add(25)
ergibt45
, dab
standardmäßig20
verwendet, wenn die Funktionadd
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ürdocument.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.