Performance & Network

Console Panel

A unified JavaScript console aggregating output from all active device frames simultaneously into one clean, filterable terminal interface.

Overview

Multi-Frame Console Aggregation

When testing a responsive layout across five different device sizes simultaneously, the standard approach to JavaScript debugging becomes impossible—you'd need to open five separate browser DevTools instances. The Console Panel solves this by intercepting console.log, console.warn, console.error, console.info, and console.debug from every proxy-loaded device frame and rendering them in a single, unified terminal.

  • Multi-Frame Aggregation: All messages from all frames appear in one feed, tagged by origin device (e.g., [iPhone 14], [Desktop]).
  • Log Level Filtering: Filter by All, LOG, INFO, WARN, ERR, or DBG with count badges on each filter button.
  • Error Flash Indicator: When any frame throws a JavaScript error, the Console panel button in the rail flashes red to immediately alert you—even if the panel is closed.
  • Color-Coded Severity: Each log level has a distinct visual treatment. Errors have a red background tint, warnings have amber, info has blue.
  • Clear Logs: One-click to clear the entire feed and start fresh.
  • Timestamp Display: Each log entry shows a precise timestamp for timing-sensitive debugging.
Pro Tips
💡
Keep it open during responsive testing A responsive layout change at a specific breakpoint can trigger unique JavaScript errors in that viewport that don't appear on desktop. The unified console makes these breakpoint-specific bugs impossible to miss.
⚠️
Requires Proxy Mode Console interception requires the Vispane bridge script to be injected into the preview frame. This is only possible when loading URLs through the Vispane proxy.
💡
Filter to ERR only before committing Before submitting a pull request, switch the Console Panel filter to "ERR" and navigate through the key user flows. Any uncaught errors that snuck into your build will surface immediately.