Ausführen von JavaScript in der Konsole

Sie können beliebige JavaScript-Ausdrücke, -Anweisungen oder -Codeausschnitte in der Konsole eingeben und während der Eingabe sofort und interaktiv ausgeführt werden. Dies ist möglich, da das Konsolentool in DevTools eine REPL-Umgebung ist. REPL steht für Read, Evaluate, Print und Loop.

Die Konsole:

1. Liest den JavaScript-Code, den Sie eingeben.
2. Wertet Ihren Code aus.
3. Gibt das Ergebnis des Ausdrucks aus.
4. Führt eine Schleife zurück zum ersten Schritt.

So geben Sie JavaScript-Anweisungen und -Ausdrücke interaktiv in der Konsole ein:

1. Klicken Sie mit der rechten Maustaste auf eine Webseite, und wählen Sie dann Untersuchen aus. DevTools wird geöffnet. Oder drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS), um die DevTools-Konsole direkt zu öffnen.

2. Klicken Sie bei Bedarf auf DevTools, um den Fokus darauf zu legen, und drücken Sie dann ESC , um die Konsole zu öffnen.

3. Klicken Sie in der Konsole, und geben Sie dann ein 2+2, ohne die EINGABETASTE zu drücken.

   Die Konsole zeigt das Ergebnis 4 während der Eingabe sofort in der nächsten Zeile an. Das Eager evaluation Feature hilft Ihnen beim Schreiben von gültigem JavaScript. Die Konsole zeigt das Ergebnis während der Eingabe an, unabhängig davon, ob Ihr JavaScript korrekt ist, und unabhängig davon, ob ein gültiges Ergebnis vorhanden ist.

   

4. Wenn Sie die EINGABETASTE drücken, führt die Konsole den JavaScript-Befehl (Ausdruck oder Anweisung) aus, zeigt das Ergebnis an und verschiebt dann den Cursor nach unten, damit Sie den nächsten JavaScript-Befehl eingeben können.

   

Automatische Vervollständigung zum Schreiben komplexer Ausdrücke

Die Konsole unterstützt Sie beim Schreiben von komplexem JavaScript mithilfe der automatischen Vervollständigung. Dieses Feature ist eine hervorragende Möglichkeit, um mehr über JavaScript-Methoden zu erfahren, die Sie zuvor noch nicht kannten.

So versuchen Sie die automatische Vervollständigung beim Schreiben von mehrteiligen Ausdrücken:

1. Geben Sie doc ein.

2. Drücken Sie die Pfeiltasten, um das Dropdownmenü hervorzuheben document .

3. Drücken Sie die TAB-TASTE , um auszuwählen document.

4. Geben Sie .bo ein.

5. Drücken Sie die TAB-TASTE , um auszuwählen document.body.

6. Geben Sie eine andere . ein, um eine große Liste möglicher Eigenschaften und Methoden zu erhalten, die im Textkörper der aktuellen Webseite verfügbar sind.

   

Konsolenverlauf

Wie bei vielen anderen Befehlszeilenumgebungen steht ein Verlauf der eingegebenen Befehle zur Wiederverwendung zur Verfügung. Drücken Sie die NACH-OBEN-TASTE , um die zuvor eingegebenen Befehle anzuzeigen.

Auf ähnliche Weise speichert die automatische Vervollständigung einen Verlauf der Befehle, die Sie zuvor eingegeben haben. Sie können die ersten Buchstaben früherer Befehle eingeben, und Ihre vorherigen Optionen werden in einem Textfeld angezeigt.

Darüber hinaus bietet die Konsole auch einige Hilfsmethoden , die Ihnen das Leben erleichtern. Enthält beispielsweise immer das Ergebnis des letzten Ausdrucks, $_ den Sie in der Konsole ausgeführt haben.

Mehrteilige Bearbeitungen

Standardmäßig erhalten Sie in der Konsole nur eine Zeile zum Schreiben des JavaScript-Ausdrucks. Der Code wird ausgeführt, wenn Sie die EINGABETASTE drücken. Die Einzeileneinschränkung kann Sie frustrieren. Um die 1-Zeilen-Einschränkung zu umgehen, drücken Sie UMSCHALT+EINGABETASTE anstelle der EINGABETASTE. Im folgenden Beispiel ist der angezeigte Wert das Ergebnis aller Zeilen (Anweisungen), die in der richtigen Reihenfolge ausgeführt werden:

Wenn Sie eine mehrzeilige Anweisung in der Konsole starten, wird der Codeblock automatisch erkannt und eingerückt. Wenn Sie beispielsweise eine block-Anweisung starten, indem Sie eine geschweifte Klammer eingeben, wird die nächste Zeile automatisch eingerückt:

Netzwerkanforderungen mit await() auf oberster Ebene

Abgesehen von Ihren eigenen Skripts unterstützt die Konsoledas Warten auf oberster Ebene , um beliebige asynchrone JavaScript-Dateien darin auszuführen. Verwenden Sie beispielsweise die fetch API, ohne die await Anweisung mit einer asynchronen Funktion umschließen zu müssen.

So rufen Sie die letzten 50 Probleme ab, die im GitHub-Repository Microsoft Edge Developer Tools für Visual Studio Code abgelegt wurden:

1. Öffnen Sie in DevTools die Konsole.

2. Kopieren Sie den folgenden Codeausschnitt, und fügen Sie ihn ein, um ein Objekt abzurufen, das 10 Einträge enthält:

   await ( await fetch(
   'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
   )).json();
   

   

   Die 10 Einträge sind schwer zu erkennen, da viele Informationen angezeigt werden.

3. Verwenden Sie optional die console.table() Protokollmethode, um nur die Informationen zu erhalten, an denen Sie interessiert sind:

   

   Verwenden Sie die Hilfsmethode der Konsole, um die copy() von einem Ausdruck zurückgegebenen Daten wiederzuverwenden.

4. Fügen Sie den folgenden Code ein. Es sendet die Anforderung und kopiert die Daten aus der Antwort in die Zwischenablage:

   copy(await (await fetch(
   'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
   )).json())
   

Die Konsole ist eine hervorragende Möglichkeit, JavaScript zu üben und einige schnelle Berechnungen durchzuführen. Die eigentliche Macht ist die Tatsache, dass Sie Zugriff auf das Fensterobjekt haben. Weitere Informationen finden Sie unter Interagieren mit dem DOM über die Konsole.