@eyeglass/inspector 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# @eyeglass/inspector
|
|
2
|
+
|
|
3
|
+
Browser-side Web Component for [Eyeglass](https://github.com/donutboyband/eyeglass) visual debugging.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
Automatically configured by `npx @eyeglass/cli init`, or manually:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install -D @eyeglass/inspector
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
Import in your app's entry file:
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
import '@eyeglass/inspector';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Or with Vite, use the plugin (created by `npx @eyeglass/cli init`):
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
// vite.config.ts
|
|
25
|
+
import { eyeglassPlugin } from './eyeglass.plugin';
|
|
26
|
+
|
|
27
|
+
export default defineConfig({
|
|
28
|
+
plugins: [eyeglassPlugin(), react()],
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Features
|
|
33
|
+
|
|
34
|
+
- **Click any element** to select it for inspection
|
|
35
|
+
- **Multi-select** up to 5 elements
|
|
36
|
+
- **Framework detection** - React, Vue, Svelte component names and file paths
|
|
37
|
+
- **Semantic capture** - accessibility tree, computed styles, geometry
|
|
38
|
+
- **Real-time feedback** - see Claude's progress in the browser
|
|
39
|
+
- **One-click undo** - revert changes from the hub
|
|
40
|
+
|
|
41
|
+
## How It Works
|
|
42
|
+
|
|
43
|
+
1. Hover over elements to highlight them
|
|
44
|
+
2. Click to select and open the request panel
|
|
45
|
+
3. Type what you want to change
|
|
46
|
+
4. Submit - Claude receives full context and makes the change
|
|
47
|
+
5. HMR updates your browser automatically
|
|
48
|
+
|
|
49
|
+
See the [main repo](https://github.com/donutboyband/eyeglass) for full documentation.
|