Skip to main content

​
Overview

LiveCodes includes a powerful built-in console for:
  • Viewing logs - See console.log, error, warn, info output
  • Interactive REPL - Execute JavaScript in the result page context
  • Debugging - Inspect objects, arrays, and DOM elements
  • Testing - Quick code experiments

​
Accessing the Console

1

Open Tools Pane

Click the Console tab in the tools pane (bottom of screen)
2

View Output

See all console messages from your code
3

Execute Commands

Type JavaScript in the console input to run code
Keyboard shortcut: Ctrl/Cmd + K to clear the console

​
Console Display Modes

Console is hidden
// Set via config
{ tools: { enabled: [], status: '' } }

​
Console Methods

​
Basic Logging

console.log('Hello, World!');
console.log('Multiple', 'arguments', 'work', 'too');
console.log({ name: 'Alice', age: 30 });
console.log([1, 2, 3, 4, 5]);

​
Log Levels

console.info('Information message');
// Blue info icon

​
Object Inspection

const user = {
  name: 'Alice',
  details: {
    age: 30,
    city: 'NYC'
  },
  hobbies: ['reading', 'coding']
};

console.dir(user);
// Displays interactive object tree

​
Tables

Display arrays and objects as tables: 
const users = [
  { name: 'Alice', age: 30, role: 'Developer' },
  { name: 'Bob', age: 25, role: 'Designer' },
  { name: 'Carol', age: 35, role: 'Manager' }
];

console.table(users);
// Displays formatted table

​
Grouping

Organize log output: 
console.group('User Details');
console.log('Name:', 'Alice');
console.log('Age:', 30);
console.log('Role:', 'Developer');
console.groupEnd();

console.groupCollapsed('Collapsed Group');
console.log('Hidden by default');
console.groupEnd();

​
Timing

Measure execution time: 
console.time('operation');

// Some code to measure
for (let i = 0; i < 1000000; i++) {
  // ...
}

console.timeEnd('operation');
// Logs: "operation: 45.234ms"

console.timeLog('operation');
// Log intermediate time

​
Counting

Count occurrences: 
for (let i = 0; i < 5; i++) {
  console.count('iteration');
}
// iteration: 1
// iteration: 2
// iteration: 3
// iteration: 4
// iteration: 5

console.countReset('iteration');
// Resets the counter

​
Assertions

Conditional logging: 
const x = 5;
console.assert(x > 10, 'x should be greater than 10');
// Logs error if assertion fails

console.assert(x > 0, 'x is positive');
// No output (assertion passes)

​
Interactive Console Input

​
Execute Code

Type JavaScript directly in the console: 
// Type in console input:
1 + 1
// Output: 2

[1, 2, 3].map(x => x * 2)
// Output: [2, 4, 6]

document.querySelector('h1').textContent
// Output: "Hello, World!"
Code executes in the context of the result page, giving you access to all variables, functions, and DOM elements.

​
Multi-line Input

Press Shift + Enter for multi-line code: 
function greet(name) {
  return `Hello, ${name}!`;
}

greet('Alice');
// Output: "Hello, Alice!"

​
Access Page Variables

// If your script defines:
let count = 0;
function increment() { count++; }

// In console:
count        // Access variable
increment()  // Call function
count        // See updated value

​
DOM Manipulation

// Query elements
const heading = document.querySelector('h1');

// Modify DOM
heading.style.color = 'red';
heading.textContent = 'Modified from Console';

// Add elements
const p = document.createElement('p');
p.textContent = 'Created from console';
document.body.appendChild(p);

​
Console Keyboard Shortcuts

ShortcutAction
EnterExecute command
Shift + EnterNew line (multi-line input)
Up ArrowPrevious command
Down ArrowNext command
Ctrl/Cmd + KClear console
Ctrl/Cmd + LClear console (alternate)

​
Console Features

​
Command History

Navigate through previous commands:
  • Press Up Arrow to cycle through previous inputs
  • Press Down Arrow to go forward in history
  • History persists across page reloads

​
Object Inspection

Click to expand/collapse:
  • Objects: See all properties
  • Arrays: View all elements
  • DOM nodes: Inspect element structure
  • Functions: View function code

​
Copy to Clipboard

Right-click any output to copy:
  • Copy value
  • Copy object as JSON
  • Copy HTML (for DOM elements)

​
Clear Console

Click the Clear button in console toolbar

​
Console in Different Contexts

​
Result Page Console

Default console shows output from the result page: 
// In your script editor:
console.log('This appears in console');

​
Service Worker Console

Service worker logs also appear: 
// In service worker:
self.addEventListener('install', () => {
  console.log('Service worker installed');
});

​
Error Handling

Uncaught errors automatically log: 
// Syntax errors
const x = ;  // Shows in console

// Runtime errors
undefinedFunction();  // Error logged

// Promise rejections
Promise.reject('Failed').catch(e => console.error(e));

​
Console Configuration

​
Via Config Object

import { createPlayground } from 'livecodes';

createPlayground('#container', {
  config: {
    tools: {
      enabled: ['console', 'compiled'],
      active: 'console',
      status: ''
    }
  }
});

​
Via URL Parameters

# Open console by default
?console=open

# Console in full pane
?console=full

# Console closed
?console=none

​
Luna Console

LiveCodes uses Luna Console, a powerful console emulator with:
  • Full console API support
  • Object tree visualization
  • Syntax highlighting
  • Auto-completion
  • Mobile-friendly UI
Theme automatically matches your LiveCodes theme (light/dark).

​
Best Practices

1

Debug with Console

Use console.log liberally during development:
console.log('Function called with:', arguments);
console.log('Current state:', state);
2

Remove Production Logs

Remove or comment out console statements before sharing:
// console.log('Debug info');  // Comment in production
3

Use Appropriate Methods

  • console.log() for general output
  • console.error() for errors
  • console.warn() for warnings
  • console.table() for structured data
4

Group Related Logs

console.group('API Call');
console.log('Request:', requestData);
console.log('Response:', responseData);
console.groupEnd();

​
Troubleshooting

  • Verify console tab is open
  • Check your code has console statements
  • Ensure code is running (click Run if needed)
  • Check for JavaScript errors preventing execution
  • Ensure result page has loaded
  • Check for syntax errors in input
  • Verify page context is available
Use console.dir() or console.table() instead of console.log():
console.dir(obj);  // Shows object structure

​
Advanced Usage

​
Custom Console Styling

console.log('%cStyled Text', 'color: blue; font-size: 20px; font-weight: bold');
console.log('%cError:', 'color: red', 'Something went wrong');

​
Stack Traces

console.trace('Trace point');
// Shows call stack

​
Performance Monitoring

performance.mark('start');
// ... code to measure ...
performance.mark('end');
performance.measure('operation', 'start', 'end');

console.log(performance.getEntriesByType('measure'));

Build docs developers (and LLMs) love

Get started for freeTalk to us