Skip to content

Commit aeeec72

Browse files
committed
Update README.md, add FEATURES.md
1 parent 5e8cdc5 commit aeeec72

File tree

5 files changed

+48
-6
lines changed

5 files changed

+48
-6
lines changed

FEATURES.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
## Component inspection
2+
3+
![Alpine Devtools Component Tab](./docs/alpine-devtools-components.png)
4+
5+
- View component list, view/edit component data
6+
- Displays an overlay on hover to quickly identify components while browsing
7+
- Component data in console globals (component data is available as `$x0`, `$x1` and so on in the browser devtools console).
8+
- New, [**Early Access feature**](https://alpinedevtools.com/pricing): jump to root element in Chrome inspector
9+
10+
## Improve state synchronisation and performance
11+
12+
In both **Free** and **Early Access** releases.
13+
14+
No need to wait for updates, refresh or close/reopen devtools.
15+
16+
- Performance improvement: tested on datasets with over 10,000 properties
17+
- State synchronisation improvements: data changes on page reflected in devtools, page reload sets correct state
18+
19+
## Store inspection
20+
21+
New, [**Early Access feature**](https://alpinedevtools.com/pricing).
22+
23+
![Alpine Devtools Stores Tab](./docs/alpine-devtools-stores.png)
24+
25+
- View stores list
26+
- View/edit store data
27+
28+
## Warnings
29+
30+
[**Early Access feature**](https://alpinedevtools.com/pricing)
31+
32+
![Alpine Devtools Warnings Tab](./docs/alpine-devtools-warnings.png)
33+
34+
- When Alpine encounters an invalid expression during evaluation it will throw and crash the component.
35+
- This feature displays the errors in a formatted log.
36+
- The originating element can be inspected in devtools by clicking on the element name on the right of the log line.

README.md

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,22 @@
55

66
## 🚨 Chrome Web Store Notice - Rewrite in Progress
77

8-
⚠️ **The published extension is currently unavailable** due to Chrome's Manifest v3 requirements ([more info](https://github.com/alpine-collective/alpinejs-devtools/issues/419))
8+
⚠️ **The published extension is currently unavailable** due to Chrome's Manifest v3 requirements ([more info](https://github.com/alpine-collective/alpinejs-devtools/issues/431))
99

10-
**Good news!** An Early Access Chrome-compatible version is ready through our [**Paid Early Access Program**](https://github.com/sponsors/HugoDF/)
10+
**Good news!** An Early Access Chrome-compatible version is ready through our [**Paid Early Access Program**](https://alpinedevtools.com/pricing)
1111

12-
**Immediate Access Includes**:
12+
**Access Includes**:
1313

14-
- ✅ Component State Inspection/Editing
15-
- ⚙️ Store State Tools (_Next Release_)
14+
✅ Component state inspection/editing
15+
✅ Store state viewing/editing (🆕)
16+
✅ More reliable state updates/sync (🆕)
17+
✅ Highlight component in page on hover
18+
✅ Component data in console globals
19+
✅ Jump to root element in Chrome inspector (🆕)
20+
✅ Warnings tab (inc. Alpine v3 support)
21+
✅ High performance on nested data objects (🆕️, tested on ~10k data properties)
1622

17-
**Multiple Tiers Available** 👉 [Explore Options](https://github.com/sponsors/HugoDF)
23+
**Multiple Tiers Available** 👉 [Explore Options](https://alpinedevtools.com/pricing)
1824

1925
# Alpine.js devtools
2026

253 KB
Loading

docs/alpine-devtools-stores.png

202 KB
Loading

docs/alpine-devtools-warnings.png

150 KB
Loading

0 commit comments

Comments
 (0)