What is a JavaScript runner?

JavaScript is the language that runs in every web browser, and most developers test small pieces of it by pasting them into the browser console. A JavaScript runner does the same job in a page of its own. You write a few lines of code, run them, and read what the code prints with console.log. It is a quick way to check how a function behaves, try out an idea, or find out what a method returns without setting up a project.

Tool description

This tool runs your JavaScript in your browser and shows everything the code writes to the console. Type or paste code on the left and press Run, or press Ctrl+Enter (Cmd+Enter on a Mac). The output appears on the right, one line for each console call, with warnings and errors marked in color. Nothing runs until you ask for it, so you can edit freely.

The code runs in a Web Worker, which is a background thread of your browser. Because of that, a script that never ends will not freeze the page: press Stop and it is gone. Your code is not sent to a server.

Examples

Print a calculation and an object:

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

The output is:

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

Wait for asynchronous work with top-level await:

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

Features

  • Shows the output of console.log, info, debug, warn, and error, with colors for warnings and errors
  • Formats objects, arrays, maps, sets, classes, dates, and errors, and handles circular references
  • Supports placeholders such as %s, %d, %i, %f, %j, and %o in the first argument
  • Supports console.group, count, time, assert, dir, and clear
  • Runs async code, including top-level await, timers, and promises
  • Reports syntax errors, uncaught errors, and unhandled promise rejections in the output
  • Stop button that ends a script at once, even one stuck in an endless loop
  • Preserve logs option, on by default, keeps the output of earlier runs so you can compare results
  • Hover over a line in the output to see the date and time it was logged
  • Copy the whole output, clear it with the Clear button, or download your code as a file

How it works

When you press Run, the tool starts a new Web Worker and sends it your code. Inside the worker, the console methods are replaced, so every call is turned into text and sent back to the page. Your code is wrapped in an async function, which is what allows await at the top level.

The status bar under the output shows Running while your code is executing or a timer you started is still waiting. A setInterval keeps the run going until you clear it or press Stop. Each run starts with a fresh worker, so variables from an earlier run are never left behind. The output is kept between runs while Preserve logs is checked. Uncheck it to start every run with an empty output, or press Clear to empty it at any time.

Tips

  • Use console.log, not a final expression: the value of the last line is not printed, so 1 + 2 on its own shows nothing
  • A worker has no page, so document, window, and other DOM objects are not available. Use self for the global scope
  • Static import statements do not work in this kind of code
  • The output keeps the newest 1000 lines, and a single line is cut after 10000 characters
  • Requests made with fetch are sent from your browser like any other, and are subject to the usual cross-origin rules
  • Run only code you trust, as you would in the browser console