Hva er en JavaScript-runner?

JavaScript er språket som kjører i alle nettlesere, og de fleste utviklere tester små kodebiter ved å lime dem inn i nettleserkonsollen. En JavaScript-runner gjør den samme jobben på en egen side. Du skriver noen kodelinjer, kjører dem og leser det koden skriver ut med console.log. Det er en rask måte å sjekke hvordan en funksjon oppfører seg på, prøve ut en idé eller finne ut hva en metode returnerer, uten å sette opp et prosjekt.

Beskrivelse av verktøyet

Dette verktøyet kjører JavaScript-koden din i nettleseren og viser alt koden skriver til konsollen. Skriv eller lim inn kode til venstre og trykk på Kjør, eller trykk Ctrl+Enter (Cmd+Enter på Mac). Resultatet vises til høyre, én linje for hvert console-kall, med advarsler og feil markert med farger. Ingenting kjører før du ber om det, så du kan redigere fritt.

Koden kjører i en Web Worker, som er en bakgrunnstråd i nettleseren. Derfor vil ikke et skript som aldri avsluttes, fryse siden: trykk på Stopp, så avsluttes det. Koden din sendes ikke til en server.

Eksempler

Skriv ut en beregning og et objekt:

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

Resultatet er:

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

Vent på asynkront arbeid med await på toppnivå:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("Start");
await sleep(1000);
console.log("Ett sekund senere");
JavaScript

Funksjoner

  • Viser resultatet fra console.log, info, debug, warn og error, med farger for advarsler og feil
  • Formaterer objekter, tabeller, maps, sets, klasser, datoer og feil, og håndterer sirkulære referanser
  • Støtter plassholdere som %s, %d, %i, %f, %j og %o i det første argumentet
  • Støtter console.group, count, time, assert, dir og clear
  • Kjører asynkron kode, inkludert await på toppnivå, tidtakere og promises
  • Rapporterer syntaksfeil, uoppfangede feil og ubehandlede promise-avvisninger i resultatet
  • Stopp-knapp som avslutter et skript umiddelbart, også et skript som sitter fast i en endeløs løkke
  • Alternativet Bevar logger er aktivert som standard og beholder resultatet fra tidligere kjøringer, slik at du kan sammenligne resultater
  • Hold markøren over en linje i resultatet for å se datoen og klokkeslettet da den ble logget
  • Kopier hele resultatet, tøm det med knappen Tøm, eller last ned koden som en fil

Slik fungerer det

Når du trykker på Kjør, starter verktøyet en ny Web Worker og sender koden din til den. Inne i workeren erstattes console-metodene, slik at hvert kall konverteres til tekst og sendes tilbake til siden. Koden din pakkes inn i en asynkron funksjon, og det er dette som gjør await på toppnivå mulig.

Statuslinjen under resultatet viser Kjører mens koden kjører, eller mens en tidtaker du har startet fortsatt venter. En setInterval holder kjøringen aktiv til du tømmer den eller trykker på Stopp. Hver kjøring starter med en ny worker, så variabler fra en tidligere kjøring blir aldri liggende igjen. Resultatet beholdes mellom kjøringer når Bevar logger er merket av. Fjern avmerkingen for å starte hver kjøring med et tomt resultat, eller trykk på Tøm for å tømme det når som helst.

Tips

  • Bruk console.log, ikke et avsluttende uttrykk: verdien av den siste linjen skrives ikke ut, så 1 + 2 alene viser ingenting
  • En worker har ingen side, så document, window og andre DOM-objekter er ikke tilgjengelige. Bruk self for det globale området
  • Statiske import-setninger fungerer ikke i denne typen kode
  • Resultatet beholder de nyeste 1000 linjene, og én enkelt linje kuttes etter 10 000 tegn
  • Forespørsler som gjøres med fetch, sendes fra nettleseren din på samme måte som andre forespørsler og følger de vanlige reglene for cross-origin
  • Kjør bare kode du stoler på, på samme måte som i nettleserkonsollen