Che cos'è un esecutore JavaScript?

JavaScript è il linguaggio eseguito in ogni browser web e la maggior parte degli sviluppatori testa piccole parti di codice incollandole nella console del browser. Un esecutore JavaScript svolge lo stesso compito in una pagina dedicata. Scrivi alcune righe di codice, le esegui e leggi ciò che il codice stampa con console.log. È un modo rapido per verificare il comportamento di una funzione, provare un'idea o scoprire cosa restituisce un metodo senza configurare un progetto.

Descrizione dello strumento

Questo strumento esegue il tuo JavaScript nel browser e mostra tutto ciò che il codice scrive nella console. Digita o incolla il codice a sinistra e premi Esegui, oppure premi Ctrl+Enter (Cmd+Enter su Mac). L'output appare a destra, una riga per ogni chiamata a console, con avvisi ed errori contrassegnati da colori. Nulla viene eseguito finché non lo richiedi, quindi puoi modificare il codice liberamente.

Il codice viene eseguito in un Web Worker, ovvero in un thread in background del browser. Per questo motivo, uno script che non termina non bloccherà la pagina: premi Interrompi e verrà terminato. Il tuo codice non viene inviato a un server.

Esempi

Stampa un calcolo e un oggetto:

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

L'output è:

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

Attendi un'operazione asincrona con await di livello superiore:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("Inizio");
await sleep(1000);
console.log("Un secondo dopo");
JavaScript

Funzionalità

  • Mostra l'output di console.log, info, debug, warn ed error, usando colori per gli avvisi e gli errori
  • Formatta oggetti, array, mappe, set, classi, date ed errori e gestisce i riferimenti circolari
  • Supporta segnaposto come %s, %d, %i, %f, %j e %o nel primo argomento
  • Supporta console.group, count, time, assert, dir e clear
  • Esegue codice asincrono, incluso await di livello superiore, timer e promise
  • Segnala nell'output gli errori di sintassi, gli errori non intercettati e i rifiuti di promise non gestiti
  • Il pulsante Interrompi termina immediatamente uno script, anche se bloccato in un ciclo infinito
  • L'opzione Mantieni i log, attiva per impostazione predefinita, conserva l'output delle esecuzioni precedenti per consentire di confrontare i risultati
  • Passa il mouse su una riga dell'output per visualizzare la data e l'ora in cui è stata registrata
  • Copia l'intero output, cancellalo con il pulsante Cancella oppure scarica il codice come file

Come funziona

Quando premi Esegui, lo strumento avvia un nuovo Web Worker e gli invia il codice. All'interno del worker, i metodi di console vengono sostituiti, così ogni chiamata viene convertita in testo e rinviata alla pagina. Il codice viene racchiuso in una funzione asincrona, consentendo di usare await al livello superiore.

La barra di stato sotto l'output mostra In esecuzione mentre il codice viene eseguito o un timer avviato è ancora in attesa. Un setInterval mantiene attiva l'esecuzione finché non lo cancelli o premi Interrompi. Ogni esecuzione inizia con un worker vuoto, quindi le variabili di un'esecuzione precedente non vengono mai mantenute. L'output viene conservato tra le esecuzioni quando Mantieni i log è selezionato. Deselezionalo per iniziare ogni esecuzione con un output vuoto, oppure premi Cancella per svuotarlo in qualsiasi momento.

Suggerimenti

  • Usa console.log, non un'espressione finale: il valore dell'ultima riga non viene stampato, quindi 1 + 2 da solo non mostra nulla
  • Un worker non dispone di una pagina, quindi document, window e gli altri oggetti DOM non sono disponibili. Usa self per l'ambito globale
  • Le istruzioni di import statiche non funzionano in questo tipo di codice
  • L'output conserva le 1000 righe più recenti e una singola riga viene troncata dopo 10000 caratteri
  • Le richieste effettuate con fetch vengono inviate dal browser come qualsiasi altra richiesta e sono soggette alle normali regole cross-origin
  • Esegui solo codice di cui ti fidi, come faresti nella console del browser