inspector-ng 0.0.11 → 0.0.12
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 +4 -14
- package/esm2022/lib/inspector.component.mjs +135 -92
- package/esm2022/lib/utils.mjs +9 -9
- package/fesm2022/inspector-ng.mjs +142 -99
- package/fesm2022/inspector-ng.mjs.map +1 -1
- package/lib/inspector.component.d.ts +19 -4
- package/lib/utils.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -52,7 +52,7 @@ Place `<inspector-overlay>` in your root template (e.g. `app.component.html`). I
|
|
|
52
52
|
></inspector-overlay>
|
|
53
53
|
```
|
|
54
54
|
|
|
55
|
-
### Step 3:
|
|
55
|
+
### Step 3: Open the command palette
|
|
56
56
|
|
|
57
57
|
That's it. Press **`Ctrl/Cmd + Shift + P`** in your browser to open the Inspector command palette. No further configuration is required.
|
|
58
58
|
|
|
@@ -74,7 +74,7 @@ export const appConfig: ApplicationConfig = {
|
|
|
74
74
|
};
|
|
75
75
|
```
|
|
76
76
|
|
|
77
|
-
Use the compact Save action in the command palette to capture the current JSON-serializable NgRx root state immediately. `Ctrl/Cmd+Shift+P` opens the fuzzy checkpoint finder.
|
|
77
|
+
Use the compact Save action in the command palette to capture the current JSON-serializable NgRx root state immediately. `Ctrl/Cmd+Shift+P` opens the fuzzy checkpoint finder. Rename and delete remain explicit buttons on each record.
|
|
78
78
|
|
|
79
79
|
Records are stored per origin in IndexedDB database `inspector-ng`, object store `checkpoints`. This needs no browser permission prompt and does not map to a visible or fixed OS path. Nothing is evicted automatically. Existing `inspector-checkpoints-v1` localStorage records are deliberately ignored.
|
|
80
80
|
|
|
@@ -104,25 +104,15 @@ A checkpoint contains the root Store value and current route. Restore dispatches
|
|
|
104
104
|
|
|
105
105
|
| Key | Action |
|
|
106
106
|
|---|---|
|
|
107
|
-
| `
|
|
108
|
-
| `
|
|
109
|
-
| `G` | Guides mode — place alignment guides on the page |
|
|
110
|
-
| `H` / `V` | Toggle guide orientation (horizontal / vertical) |
|
|
111
|
-
| `Alt` (hold) | Measure pixel distance between the selected element and the hovered element |
|
|
112
|
-
| `Esc` | Clear selection, deselect guides, reset state |
|
|
113
|
-
| `Ctrl/Cmd + Z` | Undo last guide change |
|
|
114
|
-
| `Ctrl/Cmd + Shift + Z` | Redo guide change |
|
|
115
|
-
| `Backspace` / `Delete` | Delete the selected guide |
|
|
116
|
-
| `Ctrl/Cmd + Shift + P` | Search and restore checkpoints when configured |
|
|
107
|
+
| `Ctrl/Cmd + Shift + P` | Open the Inspector command palette when configured |
|
|
108
|
+
| `Esc` | Clear selections, guides, and transient overlays |
|
|
117
109
|
|
|
118
110
|
## Features
|
|
119
111
|
|
|
120
112
|
- **Element Inspection** — Click any element to see its bounding box, padding, margin, font size, line height, color, and more.
|
|
121
113
|
- **Typography Overlay** — Annotate all visible text blocks with their computed typography styles.
|
|
122
114
|
- **Alignment Guides** — Place draggable vertical/horizontal guides with snap-to behavior.
|
|
123
|
-
- **Distance Measurement** — Hold `Alt` to measure pixel distance between two elements.
|
|
124
115
|
- **Gap Detection** — Detects and displays flex/grid gap values.
|
|
125
|
-
- **Undo/Redo** — Full history for guide operations.
|
|
126
116
|
- **State Persistence** — Optionally saves and restores state across page reloads.
|
|
127
117
|
- **SSR-Safe** — Uses `isPlatformBrowser` to avoid running on the server.
|
|
128
118
|
|