inspector-ng 0.0.1 → 0.0.2
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 +105 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,24 +1,116 @@
|
|
|
1
|
-
# inspector
|
|
1
|
+
# inspector-ng
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
On-screen inspection tools for Angular. Measure spacing, inspect typography, place guides — without leaving the browser.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Inspiration
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
> Note: Don't forget to add `--project inspector` or else it will be added to the default project in your `angular.json` file.
|
|
7
|
+
This project is inspired by [mesurer](https://github.com/ibelick/mesurer) by [ibelick](https://github.com/ibelick) — a lightweight measurement and alignment overlay for React apps. **inspector-ng** brings the same concept to the Angular ecosystem, reimagined with Angular's standalone components, signal-based reactivity, and `OnPush` change detection.
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
Full credit to [ibelick](https://github.com/ibelick) for the original idea and design.
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
## Installation
|
|
13
12
|
|
|
14
|
-
|
|
13
|
+
```bash
|
|
14
|
+
npm install inspector-ng
|
|
15
|
+
```
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
## Getting Started
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
### Step 1: Import the component
|
|
19
20
|
|
|
20
|
-
|
|
21
|
+
Open your root component (e.g. `app.component.ts`) and import `inspectorComponent` from `inspector-ng`. Add it to the `imports` array:
|
|
21
22
|
|
|
22
|
-
|
|
23
|
+
```ts
|
|
24
|
+
import { Component } from '@angular/core';
|
|
25
|
+
import { inspectorComponent } from 'inspector-ng';
|
|
23
26
|
|
|
24
|
-
|
|
27
|
+
@Component({
|
|
28
|
+
selector: 'app-root',
|
|
29
|
+
standalone: true,
|
|
30
|
+
imports: [inspectorComponent], // <-- add this
|
|
31
|
+
templateUrl: './app.component.html',
|
|
32
|
+
})
|
|
33
|
+
export class AppComponent {}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
> **Using NgModules?** If your app uses `NgModule` (not standalone), add `inspectorComponent` to your module's `imports` array instead, then use the selector in any component template within that module.
|
|
37
|
+
|
|
38
|
+
### Step 2: Add the overlay to your template
|
|
39
|
+
|
|
40
|
+
Place `<inspector-overlay>` in your root template (e.g. `app.component.html`). It can go at the top or bottom — it renders as a fixed overlay on top of everything:
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<!-- Your existing app template -->
|
|
44
|
+
<router-outlet></router-outlet>
|
|
45
|
+
|
|
46
|
+
<!-- Inspector overlay -->
|
|
47
|
+
<inspector-overlay
|
|
48
|
+
[persistOnReload]="true"
|
|
49
|
+
[hoverHighlightEnabled]="true"
|
|
50
|
+
></inspector-overlay>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Step 3: Press `M` to toggle the inspector
|
|
54
|
+
|
|
55
|
+
That's it. Press **`M`** in your browser to open the inspector toolbar. No further configuration is required.
|
|
56
|
+
|
|
57
|
+
## Configuration
|
|
58
|
+
|
|
59
|
+
### Inputs
|
|
60
|
+
|
|
61
|
+
| Input | Type | Default | Description |
|
|
62
|
+
|---|---|---|---|
|
|
63
|
+
| `persistOnReload` | `boolean` | `false` | Persist inspector state (guides, settings) to localStorage across page reloads |
|
|
64
|
+
| `hoverHighlightEnabled` | `boolean` | `true` | Show a highlight rectangle when hovering over elements |
|
|
65
|
+
| `highlightColor` | `string` | `"#4f8cff"` | Accent color for element selection highlights |
|
|
66
|
+
| `guideColor` | `string` | `"#ff7a00"` | Color for alignment guides |
|
|
67
|
+
|
|
68
|
+
### Example with all options
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<inspector-overlay
|
|
72
|
+
[persistOnReload]="true"
|
|
73
|
+
[hoverHighlightEnabled]="true"
|
|
74
|
+
highlightColor="#10b981"
|
|
75
|
+
guideColor="#f59e0b"
|
|
76
|
+
></inspector-overlay>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Keyboard Shortcuts
|
|
80
|
+
|
|
81
|
+
| Key | Action |
|
|
82
|
+
|---|---|
|
|
83
|
+
| `M` | Toggle inspector on/off |
|
|
84
|
+
| `S` | Select mode — click elements to inspect their bounds, padding, margin, and styles |
|
|
85
|
+
| `G` | Guides mode — place alignment guides on the page |
|
|
86
|
+
| `H` / `V` | Toggle guide orientation (horizontal / vertical) |
|
|
87
|
+
| `Alt` (hold) | Measure pixel distance between the selected element and the hovered element |
|
|
88
|
+
| `Esc` | Clear selection, deselect guides, reset state |
|
|
89
|
+
| `Ctrl/Cmd + Z` | Undo last guide change |
|
|
90
|
+
| `Ctrl/Cmd + Shift + Z` | Redo guide change |
|
|
91
|
+
| `Backspace` / `Delete` | Delete the selected guide |
|
|
92
|
+
|
|
93
|
+
## Features
|
|
94
|
+
|
|
95
|
+
- **Element Inspection** — Click any element to see its bounding box, padding, margin, font size, line height, color, and more.
|
|
96
|
+
- **Typography Overlay** — Annotate all visible text blocks with their computed typography styles.
|
|
97
|
+
- **Alignment Guides** — Place draggable vertical/horizontal guides with snap-to behavior.
|
|
98
|
+
- **Distance Measurement** — Hold `Alt` to measure pixel distance between two elements.
|
|
99
|
+
- **Gap Detection** — Detects and displays flex/grid gap values.
|
|
100
|
+
- **Undo/Redo** — Full history for guide operations.
|
|
101
|
+
- **State Persistence** — Optionally saves and restores state across page reloads.
|
|
102
|
+
- **SSR-Safe** — Uses `isPlatformBrowser` to avoid running on the server.
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
## Compatibility
|
|
106
|
+
|
|
107
|
+
| Dependency | Version |
|
|
108
|
+
|---|---|
|
|
109
|
+
| `@angular/core` | `^17.3.0` |
|
|
110
|
+
| `@angular/common` | `^17.3.0` |
|
|
111
|
+
|
|
112
|
+
Built as a standalone component with signal-based reactivity and `OnPush` change detection.
|
|
113
|
+
|
|
114
|
+
## License
|
|
115
|
+
|
|
116
|
+
MIT
|