Console and network

Code in the output

Inside the output, console is a proxy that posts every call to the playground. So these calls do not appear in the browser's own DevTools console for the output frame. Experimental console._original keeps the native console.

Errors are logged for you: an unhandled promise rejection as console.error('Unhandled rejection', reason), and an uncaught error of the window as console.error(<stack>), with the out.rtcode.* URLs stripped from the stack, or with the message when there is no stack.

Workers

The console calls of <script type=worker> code, which runs in the output's service worker, arrive with 🛎️⚙️ as their first argument. The prefix is left out for console.group*() calls and for messages whose first argument contains %c. The calls are relayed to the output window of the session, so they do not reach the service worker's own DevTools console, and when no output window of the session is open, they are dropped.

A failure of a worker handler is logged with console.error, 🛎️⚙️, a ☁️ marker for a worker that fails closed or ⛅ for one that fails open, a newline and the filtered stack. Throw Error objects in workers, so that a failure has a stack to log. The frames of the stack read <service-worker>:line:col. Their line numbers are not the editor's line numbers: treat them as approximate. See Using workers.

Several outputs

With several outputs open, in tabs or popups, every output's console calls land in the same console and badges. Your code runs once per output, so its logs repeat once per output. See Output windows.

Reloads clear everything

Every full output load, whether you press F5 or the output reloads for another reason, clears the console, the network list and the badges, and resets the fingerprint. During an Agent Folder Share, it also empties 📜.json. See Live sync and reloads.

Commands you type into the console

The panel

A small panel at the top right of the console holds a Fingerprint checkbox, with the tooltip "Press F5 to reload!", and a field with the current hash, with the tooltip "Alt + Click: copy console to clipboard". The field is cut off at 36% of the width of the viewport, and you can select its full text. The fingerprint is off by default and is not saved: reloading the playground resets everything and unchecks the box.

How the hash is built

The hash is a rolling SHA-256 chain. The state starts empty. For each console event while the box is checked, the new state is the SHA-256 of the previous state followed by the event: its method, its group depth and its data. The field shows the state as 64 lowercase hex digits. The data of an event depends on its method:

log, info, warn, error, debug, dir, dirxml, table, group, groupCollapsed, exceptions and failed assertions

The arguments.

trace

The arguments and the stack.

count

The label and the value.

countReset, time, timeStamp, profile, profileEnd

The label.

timeLog and timeEnd

The label and the duration in milliseconds, and for timeLog the arguments too.

groupEnd

Nothing.

Comparing two runs

Check Fingerprint, then press F5 with the focus in the editor or in the output. F5 inside the console is swallowed. Read the hash once the run has settled. Equal hashes mean identical console streams. console.clear(), whether your code calls it or every full output load does, resets the hash and the history.

<script type=module>
  const items = ['alpha', 'beta', 'gamma'];
  console.log('items', items.length);
  console.table(items.map((name, i) => ({ i, name })));
  console.assert(items.length === 3, 'three items');
</script>

1. Open the console with F12 and check Fingerprint.
2. Press F5 with the focus in the editor, and note the hash.
3. Change the code, press F5 again and compare the hashes.

Deterministic calls give identical hashes. Avoid console.time(), console.timeEnd() and console.trace() when you compare runs: their durations and stacks differ from run to run, and they change the hash.

History and copying

The console records every call since it loaded or was last cleared, also while the box is unchecked, as an object with the method, the group depth and the arguments, the label, the value, the duration or the stack. Alt + click on the hash, while the box is checked, copies the hash, a blank line, and then one JSON object per line, without timestamps. The copy uses the clipboard permission that the console frame is granted.

The history can contain calls from before you checked the box, which the hash does not cover. So a copied hash and its log can disagree.

The file

• One line per call, as JSON Lines: {"<method>": [arguments]}. Any console function is relayed, and a call is recorded as it was made, so console.assert(true, 'x') gives {"assert":[true,"x"]}.
• While a share is active, the live log is in 📜.json.crswap, because Chromium buffers a stream that is open for writing there. 📜.json stays empty until the share ends. Read both: cat 📜.json*.
• Code in the output, including o.eval.js, produces unprefixed lines. Worker code produces lines with "🛎️⚙️" as the first element, for example {"log":["🛎️⚙️","hi"]}. The console calls of io.eval.js run in the playground window, and never reach the file.
• Output errors are logged automatically: an uncaught error as {"error":["<filtered stack>"]}, and an unhandled rejection as {"error":["Unhandled rejection", <reason>]}.
• console.clear() in the output, and clearing the console panel, empty the file. The file has no rotation and no size cap: it grows until it is cleared, the share starts again or the output reloads.

How arguments are recorded

The playground structured-clones the arguments and encodes them as JSON:

If an argument cannot be cloned, such as a function, a DOM node or a symbol, the whole array of arguments is recorded as one JSON string. So the value of a line is either an array or a string that you parse again.

const lines = text.split('\n').filter(Boolean).map(l => Object.entries(JSON.parse(l))[0]).map(([method, a]) => ({ method, worker: (typeof a === 'string' ? JSON.parse(a) : a)[0] === '🛎️⚙️', args: typeof a === 'string' ? JSON.parse(a) : a }))