Wat is een JavaScript-runner?

JavaScript is de taal die in elke webbrowser wordt uitgevoerd. De meeste ontwikkelaars testen kleine stukjes code door ze in de browserconsole te plakken. Een JavaScript-runner doet hetzelfde op een eigen pagina. Je schrijft een paar regels code, voert ze uit en leest wat de code afdrukt met console.log. Het is een snelle manier om te controleren hoe een functie zich gedraagt, een idee uit te proberen of te achterhalen wat een methode retourneert zonder eerst een project in te stellen.

Beschrijving van de tool

Deze tool voert je JavaScript uit in je browser en toont alles wat de code naar de console schrijft. Typ of plak code links en druk op Uitvoeren, of druk op Ctrl+Enter (Cmd+Enter op een Mac). De uitvoer verschijnt rechts, één regel voor elke aanroep van console, waarbij waarschuwingen en fouten met kleur worden gemarkeerd. Er wordt niets uitgevoerd totdat je daar opdracht toe geeft, dus je kunt de code vrij bewerken.

De code wordt uitgevoerd in een Web Worker, een achtergrondthread van je browser. Daardoor zal een script dat nooit eindigt de pagina niet vast laten lopen: druk op Stop en het script wordt beëindigd. Je code wordt niet naar een server verzonden.

Voorbeelden

Een berekening en een object afdrukken:

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

De uitvoer is:

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

Wachten op asynchroon werk met await op topniveau:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("Start");
await sleep(1000);
console.log("Eén seconde later");
JavaScript

Functies

  • Toont de uitvoer van console.log, info, debug, warn en error, met kleuren voor waarschuwingen en fouten
  • Maakt objecten, arrays, maps, sets, classes, datums en fouten opgemaakt en verwerkt circulaire verwijzingen
  • Ondersteunt placeholders zoals %s, %d, %i, %f, %j en %o in het eerste argument
  • Ondersteunt console.group, count, time, assert, dir en clear
  • Voert asynchrone code uit, inclusief await op topniveau, timers en promises
  • Meldt syntaxfouten, niet-opgevangen fouten en niet-afgehandelde afwijzingen van promises in de uitvoer
  • Een Stop-knop die een script onmiddellijk beëindigt, ook wanneer het in een eindeloze lus vastzit
  • De optie Logboeken behouden, standaard ingeschakeld, bewaart de uitvoer van eerdere uitvoeringen zodat je resultaten kunt vergelijken
  • Beweeg de muis over een regel in de uitvoer om de datum en tijd te zien waarop deze is gelogd
  • Kopieer de volledige uitvoer, wis deze met de knop Wissen of download je code als bestand

Hoe het werkt

Wanneer je op Uitvoeren drukt, start de tool een nieuwe Web Worker en stuurt deze je code. In de worker worden de methoden van console vervangen, zodat elke aanroep wordt omgezet in tekst en terug naar de pagina wordt gestuurd. Je code wordt verpakt in een asynchrone functie, waardoor await op topniveau mogelijk is.

De statusbalk onder de uitvoer toont Bezig wanneer je code wordt uitgevoerd of wanneer een door jou gestarte timer nog wacht. Een setInterval houdt de uitvoering actief totdat je deze wist of op Stop drukt. Elke uitvoering start met een nieuwe worker, zodat variabelen uit een eerdere uitvoering nooit achterblijven. De uitvoer wordt tussen uitvoeringen bewaard zolang Logboeken behouden is ingeschakeld. Schakel deze optie uit om elke uitvoering met een lege uitvoer te starten, of druk op Wissen om de uitvoer op elk moment leeg te maken.

Tips

  • Gebruik console.log in plaats van een laatste expressie: de waarde van de laatste regel wordt niet afgedrukt, dus 1 + 2 op zichzelf toont niets
  • Een worker heeft geen pagina, dus document, window en andere DOM-objecten zijn niet beschikbaar. Gebruik self voor de globale scope
  • Statische import-instructies werken niet in dit type code
  • De uitvoer bewaart de nieuwste 1000 regels en één regel wordt afgebroken na 10000 tekens
  • Aanvragen met fetch worden net als alle andere aanvragen vanuit je browser verzonden en vallen onder de gebruikelijke cross-originregels
  • Voer alleen code uit die je vertrouwt, net zoals in de browserconsole