O que é um executor de JavaScript?

JavaScript é a linguagem executada em todos os navegadores da web, e a maioria dos desenvolvedores testa pequenos trechos colando-os no console do navegador. Um executor de JavaScript faz o mesmo em uma página própria. Você escreve algumas linhas de código, executa-as e lê o que o código imprime com console.log. É uma maneira rápida de verificar como uma função se comporta, experimentar uma ideia ou descobrir o que um método retorna sem precisar configurar um projeto.

Descrição da ferramenta

Esta ferramenta executa seu JavaScript no navegador e mostra tudo o que o código escreve no console. Digite ou cole o código à esquerda e pressione Executar, ou pressione Ctrl+Enter (Cmd+Enter no Mac). A saída aparece à direita, uma linha para cada chamada de console, com avisos e erros destacados por cores. Nada é executado até que você solicite, portanto, você pode editar livremente.

O código é executado em um Web Worker, que é uma thread em segundo plano do navegador. Por isso, um script que nunca termina não congelará a página: pressione Parar e ele será encerrado. Seu código não é enviado a um servidor.

Exemplos

Imprimir um cálculo e um objeto:

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

A saída é:

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

Aguardar uma operação assíncrona com await no nível superior:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("Start");
await sleep(1000);
console.log("One second later");
JavaScript

Recursos

  • Mostra a saída de console.log, info, debug, warn e error, com cores para avisos e erros
  • Formata objetos, arrays, maps, sets, classes, datas e erros, além de lidar com referências circulares
  • Oferece suporte a marcadores de posição como %s, %d, %i, %f, %j e %o no primeiro argumento
  • Oferece suporte a console.group, count, time, assert, dir e clear
  • Executa código assíncrono, incluindo await no nível superior, timers e promises
  • Relata erros de sintaxe, erros não capturados e rejeições de promises não tratadas na saída
  • Botão Parar que encerra um script imediatamente, mesmo quando ele está preso em um loop infinito
  • A opção Preservar logs, ativada por padrão, mantém a saída de execuções anteriores para que você possa comparar os resultados
  • Passe o cursor sobre uma linha da saída para ver a data e a hora em que ela foi registrada
  • Copie toda a saída, limpe-a com o botão Limpar ou baixe seu código como um arquivo

Como funciona

Quando você pressiona Executar, a ferramenta inicia um novo Web Worker e envia seu código para ele. Dentro do worker, os métodos de console são substituídos, de modo que cada chamada seja convertida em texto e enviada de volta para a página. Seu código é envolvido em uma função assíncrona, o que permite usar await no nível superior.

A barra de status abaixo da saída mostra Executando enquanto seu código está sendo executado ou enquanto um timer iniciado por você ainda estiver aguardando. Um setInterval mantém a execução ativa até que você o limpe ou pressione Parar. Cada execução começa com um worker novo, portanto, as variáveis de uma execução anterior nunca permanecem. A saída é mantida entre as execuções enquanto a opção Preservar logs estiver marcada. Desmarque-a para iniciar cada execução com uma saída vazia ou pressione Limpar para esvaziá-la a qualquer momento.

Dicas

  • Use console.log, não uma expressão final: o valor da última linha não é impresso, portanto, 1 + 2 sozinho não mostra nada
  • Um worker não tem uma página, portanto, document, window e outros objetos do DOM não estão disponíveis. Use self para o escopo global
  • Instruções de importação estática não funcionam nesse tipo de código
  • A saída mantém as 1000 linhas mais recentes, e uma única linha é cortada após 10000 caracteres
  • As solicitações feitas com fetch são enviadas pelo navegador como qualquer outra solicitação e estão sujeitas às regras comuns de cross-origin
  • Execute apenas código em que você confia, assim como faria no console do navegador