Online HTML Editor

Q: Why does my alert not open a window?

Because the preview is an isolated frame in which modal dialogs are blocked. The alert becomes a console line, and you use console.log to debug.

Q: The error shows a strange line. What now?

The line is only converted to the pane when the error is in your JavaScript. If it comes from the HTML (an onclick attribute) or a library, the message shows without a pane number, and it is worth checking the snippet quoted in the error text.

Q: Can I use import and modules?

The pane is a plain script. For CDN modules use a script tag with type="module" in the HTML pane. There is no npm module resolution.

Continue in the tool

Open full tool

More pages for this tool

test javascript code online

Test JavaScript in the browser, with a console and errors by line

Write the JavaScript in the third pane and every console.log shows up in the console under the preview. An uncaught error appears over the preview with the line from your JavaScript pane, also marked in the editor.

What the console captures and what it changes

A short script, injected ahead of your code, wraps console.log, info, warn, error and debug, and each call produces a line coloured by level. Objects, arrays, Maps and Sets are described to at most 3 levels of depth, 50 items per list and 30 properties per object, circular structures show as [Circular], and each message is cut at 3,000 characters. Also recorded are console.assert (an Assertion failed message), console.time and timeEnd, uncaught errors, rejected promises with no catch and images or scripts that fail to load. Consecutive repeats of the same line become a counter, and the console keeps the last 500 entries.
Browser dialogs do not work in an isolated frame, so they were replaced with safe equivalents: alert writes a line, confirm returns false and prompt returns null. Code that depends on the user's answer needs a field on the page instead. A line number for an error comes from the assembled document, and the tool converts it to the line of the JavaScript pane when the error is inside it; an error coming from the HTML or an external library shows without a pane line. A loop that produces more than 800 messages is cut off, with a notice, so the main page is not flooded.
The code runs with sandbox="allow-scripts", without allow-same-origin, which stops it from reading the site's localStorage or cookies and from navigating the main window. The network stays open, so fetch and CDN scripts work. The weak point no sandbox solves is the infinite loop: if the preview does not report that it loaded within 5 seconds, it is flagged as not responding and the Stop button becomes available.

What shows up in the console

Several values in one log

Input: console.log('oi', 42, {a: [1, 2], b: null})
Expected output: oi 42 {a: [1, 2], b: null}

Bare strings print unquoted and objects in compact notation.

alert becomes a console line

Input: alert('oi')
Expected output: alert: oi

No window opens; the message is recorded.

confirm always declines

Input: confirm('certo?')
Expected output: false

And the console records confirm: certo? (false).

A failing assertion

Input: console.assert(1 === 2, 'nope')
Expected output: Assertion failed: nope

Logged at the error level.

Circular structure

Input: var o = {}; o.self = o; console.log(o)
Expected output: {self: [Circular]}

It neither hangs nor throws.

A loop with 2,000 logs

Input: for (var i = 0; i < 2000; i++) console.log(i)
Expected output: 800 linhas e um aviso

The excess is dropped to protect the page.

Full tool FAQ

How can I test HTML, CSS and JavaScript online without installing anything?

Write in the three panes and the preview updates at once. There is no account, server or file: the browser builds a page with your HTML in the body, your CSS in a style tag and your JavaScript at the end of the body, and runs it all in an isolated iframe. The console shows whatever the code prints.

Does my code have access to this site's data?

Why do alert, confirm and prompt not open a dialog?

How do I share what I wrote?

Does the share link send my code to a server?

Can I use CDN libraries and call APIs with fetch?

How do I download the page as an HTML file?

The preview froze. What should I do?

Can I paste a complete HTML page?

Is what I write saved?

Frequently asked questions

Why does my alert not open a window?

Because the preview is an isolated frame in which modal dialogs are blocked. The alert becomes a console line, and you use console.log to debug.

The error shows a strange line. What now?

The line is only converted to the pane when the error is in your JavaScript. If it comes from the HTML (an onclick attribute) or a library, the message shows without a pane number, and it is worth checking the snippet quoted in the error text.

Can I use import and modules?

The pane is a plain script. For CDN modules use a script tag with type="module" in the HTML pane. There is no npm module resolution.

Next steps

What the console captures and what it changes

A short script, injected ahead of your code, wraps console.log, info, warn, error and debug, and each call produces a line coloured by level. Objects, arrays, Maps and Sets are described to at most 3 levels of depth, 50 items per list and 30 properties per object, circular structures show as [Circular], and each message is cut at 3,000 characters. Also recorded are console.assert (an Assertion failed message), console.time and timeEnd, uncaught errors, rejected promises with no catch and images or scripts that fail to load. Consecutive repeats of the same line become a counter, and the console keeps the last 500 entries.

Browser dialogs do not work in an isolated frame, so they were replaced with safe equivalents: alert writes a line, confirm returns false and prompt returns null. Code that depends on the user's answer needs a field on the page instead. A line number for an error comes from the assembled document, and the tool converts it to the line of the JavaScript pane when the error is inside it; an error coming from the HTML or an external library shows without a pane line. A loop that produces more than 800 messages is cut off, with a notice, so the main page is not flooded.

The code runs with sandbox="allow-scripts", without allow-same-origin, which stops it from reading the site's localStorage or cookies and from navigating the main window. The network stays open, so fetch and CDN scripts work. The weak point no sandbox solves is the infinite loop: if the preview does not report that it loaded within 5 seconds, it is flagged as not responding and the Stop button becomes available.

What shows up in the console

Several values in one log

Input: console.log('oi', 42, {a: [1, 2], b: null})
Expected output: oi 42 {a: [1, 2], b: null}

Bare strings print unquoted and objects in compact notation.

alert becomes a console line

Input: alert('oi')
Expected output: alert: oi

No window opens; the message is recorded.

confirm always declines

Input: confirm('certo?')
Expected output: false

And the console records confirm: certo? (false).

A failing assertion

Input: console.assert(1 === 2, 'nope')
Expected output: Assertion failed: nope

Logged at the error level.

Circular structure

Input: var o = {}; o.self = o; console.log(o)
Expected output: {self: [Circular]}

It neither hangs nor throws.

A loop with 2,000 logs

Input: for (var i = 0; i < 2000; i++) console.log(i)
Expected output: 800 linhas e um aviso

The excess is dropped to protect the page.

Full tool FAQ

How can I test HTML, CSS and JavaScript online without installing anything?

Does my code have access to this site's data?

Why do alert, confirm and prompt not open a dialog?

How do I share what I wrote?

Does the share link send my code to a server?

Can I use CDN libraries and call APIs with fetch?

How do I download the page as an HTML file?

The preview froze. What should I do?

Can I paste a complete HTML page?

Is what I write saved?

Frequently asked questions

Why does my alert not open a window?

Because the preview is an isolated frame in which modal dialogs are blocked. The alert becomes a console line, and you use console.log to debug.

The error shows a strange line. What now?

Can I use import and modules?

The pane is a plain script. For CDN modules use a script tag with type="module" in the HTML pane. There is no npm module resolution.