¿Qué es un ejecutor de JavaScript?

JavaScript es el lenguaje que se ejecuta en todos los navegadores web, y la mayoría de los desarrolladores prueba pequeños fragmentos pegándolos en la consola del navegador. Un ejecutor de JavaScript hace lo mismo en su propia página. Escribes unas líneas de código, las ejecutas y lees lo que el código imprime con console.log. Es una forma rápida de comprobar cómo se comporta una función, probar una idea o averiguar qué devuelve un método sin configurar un proyecto.

Descripción de la herramienta

Esta herramienta ejecuta tu JavaScript en el navegador y muestra todo lo que el código escribe en la consola. Escribe o pega el código a la izquierda y pulsa Ejecutar, o presiona Ctrl+Enter (Cmd+Enter en un Mac). La salida aparece a la derecha, una línea por cada llamada a console, con las advertencias y los errores marcados con colores. Nada se ejecuta hasta que lo solicitas, por lo que puedes editar el código libremente.

El código se ejecuta en un Web Worker, que es un hilo en segundo plano del navegador. Por eso, un script que nunca termina no bloqueará la página: pulsa Detener y desaparecerá. Tu código no se envía a ningún servidor.

Ejemplos

Imprime un cálculo y un 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

La salida es:

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

Espera a que finalice una operación asíncrona con await de nivel superior:

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

Funciones

  • Muestra la salida de console.log, info, debug, warn y error, con colores para las advertencias y los errores
  • Da formato a objetos, arrays, mapas, conjuntos, clases, fechas y errores, y gestiona las referencias circulares
  • Admite marcadores de posición como %s, %d, %i, %f, %j y %o en el primer argumento
  • Admite console.group, count, time, assert, dir y clear
  • Ejecuta código asíncrono, incluido await de nivel superior, temporizadores y promesas
  • Informa de errores de sintaxis, errores no capturados y rechazos de promesas no gestionados en la salida
  • Botón Detener que finaliza un script de inmediato, incluso si está atascado en un bucle infinito
  • La opción Conservar registros, activada de forma predeterminada, mantiene la salida de ejecuciones anteriores para que puedas comparar los resultados
  • Coloca el cursor sobre una línea de la salida para ver la fecha y la hora en que se registró
  • Copia toda la salida, bórrala con el botón Borrar o descarga tu código como archivo

Cómo funciona

Cuando pulsas Ejecutar, la herramienta inicia un Web Worker nuevo y le envía tu código. Dentro del worker, los métodos de console se reemplazan, de modo que cada llamada se convierte en texto y se envía de vuelta a la página. Tu código se envuelve en una función asíncrona, lo que permite usar await en el nivel superior.

La barra de estado situada debajo de la salida muestra Ejecutando mientras tu código se está ejecutando o mientras un temporizador que has iniciado sigue esperando. Un setInterval mantiene la ejecución activa hasta que lo eliminas o pulsas Detener. Cada ejecución comienza con un worker nuevo, por lo que las variables de una ejecución anterior nunca permanecen. La salida se conserva entre ejecuciones mientras la opción Conservar registros esté marcada. Desmárcala para comenzar cada ejecución con una salida vacía, o pulsa Borrar para vaciarla en cualquier momento.

Consejos

  • Usa console.log, no una expresión final: el valor de la última línea no se imprime, por lo que 1 + 2 por sí solo no muestra nada
  • Un worker no tiene página, por lo que document, window y otros objetos del DOM no están disponibles. Usa self para acceder al ámbito global
  • Las sentencias de importación estáticas no funcionan en este tipo de código
  • La salida conserva las 1000 líneas más recientes y una sola línea se trunca después de 10000 caracteres
  • Las solicitudes realizadas con fetch se envían desde tu navegador como cualquier otra solicitud y están sujetas a las reglas habituales de origen cruzado
  • Ejecuta solo código en el que confíes, igual que harías en la consola del navegador