6ca8519250
- Device breakpoint toggles (mobile 375px / tablet 768px / desktop 100%) - Editor theme selector with 6 themes (VS Dark/Light, High Contrast, Monokai, Dracula, GitHub Dark) - Starter template gallery with 8 pre-built templates (Todo, API Fetch, CSS Animation, etc.) - Code autocomplete with DOM/React type definitions and snippet completions - Devtools panels: console, network, elements, performance - Code formatter (Prettier), diff view, and linter integration
30 lines
756 B
JavaScript
30 lines
756 B
JavaScript
import { registerClearHandler } from './devtools.js';
|
|
|
|
const output = () => document.getElementById('console-output');
|
|
|
|
export function initConsole() {
|
|
registerClearHandler('console', clearConsole);
|
|
|
|
window.addEventListener('message', (e) => {
|
|
if (!e.data || e.data.type !== 'console') return;
|
|
if (e.data.method === 'clear') {
|
|
clearConsole();
|
|
return;
|
|
}
|
|
appendLine(e.data.method, (e.data.args || []).join(' '));
|
|
});
|
|
}
|
|
|
|
function appendLine(method, text) {
|
|
const el = document.createElement('div');
|
|
el.className = `console-line console-${method}`;
|
|
el.textContent = text;
|
|
const out = output();
|
|
out.appendChild(el);
|
|
out.scrollTop = out.scrollHeight;
|
|
}
|
|
|
|
export function clearConsole() {
|
|
output().innerHTML = '';
|
|
}
|