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
32 lines
882 B
JavaScript
32 lines
882 B
JavaScript
let activeTab = 'console';
|
|
const clearHandlers = {};
|
|
|
|
export function registerClearHandler(tabId, fn) {
|
|
clearHandlers[tabId] = fn;
|
|
}
|
|
|
|
export function switchDevtoolsTab(tabId) {
|
|
activeTab = tabId;
|
|
document.querySelectorAll('.devtools-tab').forEach(btn => {
|
|
btn.classList.toggle('active', btn.dataset.tab === tabId);
|
|
});
|
|
document.querySelectorAll('.devtools-panel').forEach(panel => {
|
|
panel.classList.toggle('active', panel.id === `panel-${tabId}`);
|
|
});
|
|
}
|
|
|
|
export function getActiveDevtoolsTab() {
|
|
return activeTab;
|
|
}
|
|
|
|
export function initDevtools() {
|
|
document.querySelectorAll('.devtools-tab').forEach(btn => {
|
|
btn.addEventListener('click', () => switchDevtoolsTab(btn.dataset.tab));
|
|
});
|
|
|
|
document.getElementById('btn-clear-devtools').addEventListener('click', () => {
|
|
const handler = clearHandlers[activeTab];
|
|
if (handler) handler();
|
|
});
|
|
}
|