DevTools

Weblisk includes a built-in debug overlay for inspecting islands, signals, effects, and performance marks. It's activated by a URL parameter or localStorage — zero cost in production.

Activation

Enable the overlay in any of these ways:

• Add ?wl-debug to the URL
• Run localStorage.setItem('wl-debug', '1') in the browser console

Once activated, the flag persists in localStorage across page navigations. Remove it by clicking the close button or calling destroy().

Setup

import { devtools } from 'weblisk/core/devtools.js';

// Install — returns null if debug mode is not active
const dt = devtools();

// Cleanup when done
dt?.destroy();

What It Shows

The overlay displays three panels in real time:

• Islands — Lists every [data-island] element, its hydration strategy (load, idle, visible, etc.), and current status (hydrated or pending).
• Performance — All wl:-prefixed User Timing marks and measures, their timestamps and durations.
• Page — Island count, module scripts, JS heap usage, and total DOM nodes.

Typical Workflow

// In your shell.js — only add devtools in development
import { devtools } from 'weblisk/core/devtools.js';

// Safe to call unconditionally — returns null if ?wl-debug is not set
devtools();

Since the overlay only mounts when the debug flag is present, you can leave the devtools() call in your production code. It's a no-op without the flag.