@unocss/inspector

Style Inspection

This feature allows developers to inspect the styles applied to elements in their application. By attaching the inspector, you can hover over elements to see the UnoCSS classes and styles applied to them.

import { createInspector } from '@unocss/inspector';

const inspector = createInspector();
inspector.attach();

Live Editing

Live editing allows developers to make changes to their UnoCSS styles directly from the inspector interface. This can speed up the development process by providing immediate feedback on style changes.

import { createInspector } from '@unocss/inspector';

const inspector = createInspector();
inspector.attach();

// Enable live editing
inspector.enableLiveEditing();

Style Source Mapping

Source mapping helps developers trace back the styles to their original source files. This is particularly useful for debugging and understanding where specific styles are coming from.

import { createInspector } from '@unocss/inspector';

const inspector = createInspector();
inspector.attach();

// Enable source mapping
inspector.enableSourceMapping();