Documentation Console & network panel

Console & network panel

Both preview modes have Console and Network drawers, but they capture different things.

Dev preview: Console

This is Sandpack's console. It shows console output and syntax errors from the bundled app, keeps the latest 100 messages, and resets when the preview restarts.

Dev preview: Network (limited)

The dev Network drawer doesn't intercept requests. It only lists console messages that mention fetch or XMLHttpRequest, with no status codes or timings. Use the live preview, or your browser's DevTools, to inspect real requests.

Live preview: Console

Every deployed HTML file gets a small logger script. It forwards console.log/info/warn/error/debug, uncaught errors, and unhandled promise rejections to the IDE. You can filter by level, and up to 500 entries are kept.

Live preview: Network

The logger wraps window.fetch and records each request's method, URL, status, duration and errors. XMLHttpRequest calls, request/response headers, and bodies aren't captured.

Clearing logs

Click the clear (trash / ×) icon in a drawer. Live preview logs are kept per project for the browser session, so they survive iframe reloads but are cleared when you close the tab.