DevTools
Built-in debugging panel for inspecting LiVue components, requests, and events.
Note: DevTools are automatically disabled in production builds. The API returns no-op functions to prevent errors if called in production.
Quick Start
Open DevTools with the keyboard shortcut or programmatically.
// Keyboard shortcut
Ctrl+Shift+L
// Or via JavaScript
LiVue.devtools.open();Panel Tabs
Components
View the component tree with live state inspection. Click any component to see its properties, dirty fields, and validation errors.
Timeline
Chronological view of all AJAX requests with timing, status, payload preview, and response details.
Events
Track dispatched events with source component, mode (broadcast/self/to), and event data.
Stores
Inspect Pinia stores, registered plugins, global components, and custom directives.
Echo
Monitor Laravel Echo status and active WebSocket channel subscriptions.
Performance
Aggregated metrics: request counts, timing averages, template swap stats, and component counts.
Settings
Configure panel position (right, left, bottom, top) and view keyboard shortcuts.
State Inspector
When you select a component, the side panel shows three views:
| View | Description |
|---|---|
| State | Current reactive state with type-colored values. Dirty fields marked with orange * |
| Diff | Compare server state vs client state to see unsynced changes |
| Info | Component metadata: name, attributes, composables, upload/streaming status |
JavaScript API
// Panel control
LiVue.devtools.open();
LiVue.devtools.close();
LiVue.devtools.toggle();
LiVue.devtools.isOpen();
// Debug mode (verbose console logging)
LiVue.debug(true);
LiVue.debug(false);
// Access collected data
LiVue.devtools.getComponents();
LiVue.devtools.getTimeline();
LiVue.devtools.getEvents();
LiVue.devtools.getPerf();
// Clear data
LiVue.devtools.clear();
LiVue.devtools.clearTimeline();
LiVue.devtools.clearEvents();
// Background collection
LiVue.devtools.startCollecting();
LiVue.devtools.stopCollecting();Features
4 Panel Positions
Right, left, bottom, or top. Resizable by dragging the edge.
State Persistence
Panel position, active tab, and open/closed state saved to localStorage.
Auto-Reopen
If open when you refresh, it reopens automatically in the same state.
Component Icons
Visual indicators: square (root), circle (child), diamond (island).