Was ist ein JavaScript-Runner?

JavaScript ist die Sprache, die in jedem Webbrowser ausgeführt wird. Die meisten Entwickler testen kleine Codeabschnitte, indem sie sie in die Browserkonsole einfügen. Ein JavaScript-Runner erledigt dieselbe Aufgabe auf einer eigenen Seite. Sie schreiben einige Codezeilen, führen sie aus und lesen, was der Code mit console.log ausgibt. So können Sie schnell überprüfen, wie sich eine Funktion verhält, eine Idee ausprobieren oder herausfinden, welchen Wert eine Methode zurückgibt, ohne ein Projekt einrichten zu müssen.

Beschreibung des Tools

Dieses Tool führt Ihr JavaScript in Ihrem Browser aus und zeigt alles an, was der Code in die Konsole schreibt. Geben Sie links Code ein oder fügen Sie ihn dort ein und drücken Sie Ausführen oder Ctrl+Enter (auf einem Mac Cmd+Enter). Die Ausgabe erscheint rechts, eine Zeile für jeden console-Aufruf; Warnungen und Fehler werden farblich markiert. Nichts wird ausgeführt, bis Sie dies anfordern, sodass Sie den Code frei bearbeiten können.

Der Code wird in einem Web Worker ausgeführt, also in einem Hintergrund-Thread Ihres Browsers. Dadurch friert die Seite nicht ein, wenn ein Script nie endet: Drücken Sie Stopp, und es wird beendet. Ihr Code wird nicht an einen Server gesendet.

Beispiele

Eine Berechnung und ein Objekt ausgeben:

const prices = [4.5, 12, 7.25];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log("Gesamt:", total);
console.log({ count: prices.length, average: total / prices.length });
JavaScript

Die Ausgabe lautet:

Gesamt: 23.75
{ count: 3, average: 7.916666666666667 }

Mit await auf der obersten Ebene auf asynchrone Vorgänge warten:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("Start");
await sleep(1000);
console.log("Eine Sekunde später");
JavaScript

Funktionen

  • Zeigt die Ausgabe von console.log, info, debug, warn und error an, mit Farben für Warnungen und Fehler
  • Formatiert Objekte, Arrays, Maps, Sets, Klassen, Datumsangaben und Fehler und verarbeitet zirkuläre Referenzen
  • Unterstützt Platzhalter wie %s, %d, %i, %f, %j und %o im ersten Argument
  • Unterstützt console.group, count, time, assert, dir und clear
  • Führt asynchronen Code aus, einschließlich await auf der obersten Ebene, Timern und Promises
  • Meldet Syntaxfehler, nicht abgefangene Fehler und nicht behandelte Promise-Ablehnungen in der Ausgabe
  • Eine Stopp-Schaltfläche beendet ein Script sofort, auch wenn es in einer Endlosschleife feststeckt
  • Die standardmäßig aktivierte Option Protokolle beibehalten bewahrt die Ausgabe früherer Ausführungen auf, damit Sie Ergebnisse vergleichen können
  • Bewegen Sie den Mauszeiger über eine Zeile in der Ausgabe, um Datum und Uhrzeit ihrer Protokollierung zu sehen
  • Kopieren Sie die gesamte Ausgabe, leeren Sie sie mit der Schaltfläche Leeren oder laden Sie Ihren Code als Datei herunter

Funktionsweise

Wenn Sie Ausführen drücken, startet das Tool einen neuen Web Worker und sendet ihm Ihren Code. Im Worker werden die console-Methoden ersetzt, sodass jeder Aufruf in Text umgewandelt und an die Seite zurückgesendet wird. Ihr Code wird in eine asynchrone Funktion eingebettet, wodurch await auf der obersten Ebene möglich wird.

Die Statusleiste unter der Ausgabe zeigt Wird ausgeführt an, während Ihr Code ausgeführt wird oder ein von Ihnen gestarteter Timer noch wartet. Ein setInterval hält die Ausführung so lange aufrecht, bis Sie es löschen oder Stopp drücken. Jede Ausführung beginnt mit einem neuen Worker, sodass Variablen aus einer früheren Ausführung niemals erhalten bleiben. Die Ausgabe bleibt zwischen den Ausführungen erhalten, solange Protokolle beibehalten aktiviert ist. Deaktivieren Sie die Option, um jede Ausführung mit einer leeren Ausgabe zu beginnen, oder drücken Sie jederzeit Leeren, um die Ausgabe zu löschen.

Tipps

  • Verwenden Sie console.log statt eines abschließenden Ausdrucks: Der Wert der letzten Zeile wird nicht ausgegeben, daher zeigt 1 + 2 allein nichts an
  • Ein Worker hat keine Seite, daher sind document, window und andere DOM-Objekte nicht verfügbar. Verwenden Sie self für den globalen Gültigkeitsbereich
  • Statische import-Anweisungen funktionieren in dieser Art von Code nicht
  • Die Ausgabe enthält die neuesten 1000 Zeilen, und eine einzelne Zeile wird nach 10000 Zeichen abgeschnitten
  • Mit fetch ausgeführte Anfragen werden wie alle anderen von Ihrem Browser gesendet und unterliegen den üblichen Regeln für Cross-Origin-Anfragen
  • Führen Sie nur Code aus, dem Sie vertrauen, so wie in der Browserkonsole