Vad är en JavaScript-körning?

JavaScript är språket som körs i alla webbläsare, och de flesta utvecklare testar små kodstycken genom att klistra in dem i webbläsarens konsol. En JavaScript-körning gör samma sak på en egen sida. Du skriver några rader kod, kör dem och läser vad koden skriver ut med console.log. Det är ett snabbt sätt att kontrollera hur en funktion fungerar, prova en idé eller ta reda på vad en metod returnerar utan att konfigurera ett projekt.

Verktygsbeskrivning

Det här verktyget kör din JavaScript i webbläsaren och visar allt som koden skriver till konsolen. Skriv eller klistra in kod till vänster och tryck på Kör, eller tryck på Ctrl+Enter (Cmd+Enter på en Mac). Utdata visas till höger, en rad för varje console-anrop, och varningar och fel markeras med färg. Inget körs förrän du ber om det, så du kan redigera fritt.

Koden körs i en Web Worker, som är en bakgrundstråd i webbläsaren. Därför fryser sidan inte om ett skript aldrig avslutas: tryck på Stoppa så avslutas det. Din kod skickas inte till någon server.

Exempel

Skriv ut en beräkning och ett 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

Utdata är:

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

Vänta på asynkront arbete med await på toppnivå:

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

Funktioner

  • Visar utdata från console.log, info, debug, warn och error, med färger för varningar och fel
  • Formaterar objekt, arrayer, mappar, mängder, klasser, datum och fel samt hanterar cirkulära referenser
  • Stöder platshållare som %s, %d, %i, %f, %j och %o i det första argumentet
  • Stöder console.group, count, time, assert, dir och clear
  • Kör asynkron kod, inklusive await på toppnivå, timers och promises
  • Rapporterar syntaxfel, ouppfångade fel och ohanterade promise-avvisningar i utdatan
  • En Stoppa-knapp som avslutar ett skript direkt, även om det har fastnat i en oändlig loop
  • Alternativet Behåll loggar, aktiverat som standard, behåller utdata från tidigare körningar så att du kan jämföra resultaten
  • Håll muspekaren över en rad i utdatan för att se datum och tid då den loggades
  • Kopiera hela utdatan, rensa den med knappen Rensa eller ladda ner koden som en fil

Så fungerar det

När du trycker på Kör startar verktyget en ny Web Worker och skickar din kod till den. I workern ersätts console-metoderna, så varje anrop omvandlas till text och skickas tillbaka till sidan. Din kod omsluts av en asynkron funktion, vilket gör att await kan användas på toppnivå.

Statusfältet under utdatan visar Körs medan koden körs eller en timer som du har startat fortfarande väntar. En setInterval håller körningen igång tills du rensar den eller trycker på Stoppa. Varje körning startar med en ny worker, så variabler från en tidigare körning lämnas aldrig kvar. Utdatan behålls mellan körningarna när Behåll loggar är markerat. Avmarkera alternativet för att starta varje körning med tom utdata, eller tryck på Rensa för att tömma den när som helst.

Tips

  • Använd console.log, inte ett avslutande uttryck: värdet på den sista raden skrivs inte ut, så 1 + 2 ensamt visar ingenting
  • En worker har ingen sida, så document, window och andra DOM-objekt är inte tillgängliga. Använd self för det globala omfånget
  • Statiska import-satser fungerar inte i den här typen av kod
  • Utdatan behåller de senaste 1000 raderna, och en enskild rad kapas efter 10000 tecken
  • Förfrågningar som görs med fetch skickas från din webbläsare som alla andra förfrågningar och omfattas av de vanliga reglerna för cross-origin
  • Kör endast kod som du litar på, precis som i webbläsarens konsol