Enhanced Console with console.table, console.count, and More Methods

[acbcdev]

Description

Refactor the console output view to support a more complete set of console methods, making it a fully-featured developer console similar to browser DevTools.

Missing Console Methods

Currently the console only supports basic methods. We should add:

Display Methods

• console.table() - Display tabular data in a formatted table
• console.dir() - Interactive object inspection
• console.dirxml() - Display DOM elements

Grouping

• console.group() / console.groupEnd() - Group related logs
• console.groupCollapsed() - Collapsed groups by default

Counting & Timing

• console.count() / console.countReset() - Count function calls
• console.time() / console.timeEnd() - Time code execution
• console.timeLog() - Log intermediate timing

Debugging

• console.assert() - Conditional error logging
• console.trace() - Stack trace output
• console.clear() - Clear console output

UI Enhancements

Display Features

• Table rendering for console.table() with sortable columns
• Collapsible groups for console.group()
• Syntax highlighting for objects and code
• Stack trace visualization with clickable file links
• Interactive object inspection (expand/collapse properties)

Filtering & Search

• Filter by log level (log, warn, error, info, debug)
• Search/filter capability across all logs
• Regex search support
• Timestamp display toggle

User Experience

• Copy individual log entries
• Copy formatted output
• Clear console button
• Preserve scroll position
• Auto-scroll to bottom toggle
• Export logs to file

Technical Implementation

Worker Side (worker.ts)

// Implement all console methods
console.table = (data) => { /* format as table */ }
console.count = (label) => { /* track counts */ }
console.time = (label) => { /* track timers */ }
console.group = (label) => { /* handle grouping */ }
console.trace = () => { /* capture stack trace */ }

Console Component

• Enhance rendering for different output types
• Add table component for console.table()
• Add group/collapse UI components
• Handle complex data structures
• Prevent circular reference errors

Data Structures

type ConsoleOutput = {
  type: 'log' | 'warn' | 'error' | 'info' | 'table' | 'group' | 'trace'
  data: any
  timestamp: number
  line?: number
  count?: number
  groupLevel?: number
}

Performance Considerations

• Virtualize long output lists
• Lazy rendering for large objects
• Limit max output size (with user override)
• Efficient re-rendering on updates

Related Files

• packages/app/src/features/editor/console/
• packages/app/src/features/editor/run-code/worker.ts
• packages/app/src/features/common/utils/addLogsToLines.ts

Inspiration

Look at how these tools implement advanced console features:

• Chrome DevTools Console
• Firefox Developer Console
• RunKit console
• CodeSandbox console