Skip to content

Commit 2360da9

Browse files
committed
[skip ci] features & readme cleanup
1 parent 7f08d5d commit 2360da9

File tree

6 files changed

+4
-49
lines changed

6 files changed

+4
-49
lines changed

FEATURES.md

Lines changed: 1 addition & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1 @@
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-
## Improved 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-
- Access stores in the console via globals `$s0`, `$s1` ...
28-
29-
## Data Attribute Pinning
30-
31-
New, [**Early Access feature**](https://alpinedevtools.com/pricing).
32-
33-
![Alpine Devtools Pin Component Data Attribute](./docs/alpine-devtools-pin-data.png)
34-
35-
Both components and stores tab allow you to "pin"/"unpin" a data attribute. This is useful for components and stores with large data sets in order to "focus" a subset of the data.
36-
37-
## Warnings
38-
39-
[**Early Access feature**](https://alpinedevtools.com/pricing)
40-
41-
![Alpine Devtools Warnings Tab](./docs/alpine-devtools-warnings.png)
42-
43-
- When Alpine encounters an invalid expression during evaluation it will throw and crash the component.
44-
- This feature displays the errors in a formatted log.
45-
- The originating element can be inspected in devtools by clicking on the element name on the right of the log line.
1+
Moved to [alpinedevtools.com/docs](https://alpinedevtools.com/docs/#/data-inspection)

README.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
Due to Chrome's Manifest v3 rollout, the extension had to be rewritten. As part of this we've launched a [**Paid Early Access Program**](https://alpinedevtools.com/pricing).
99

10-
Public Extension includes:
10+
**Free Extension** includes:
1111

1212
- ✅ Component state inspection/editing
1313
- ✅ More reliable state updates/sync (🆕)
@@ -20,9 +20,8 @@ Public Extension includes:
2020
- ✅ Store state viewing/editing (🆕)
2121
- ✅ Store data in console globals (🆕)
2222
- ✅ Warnings tab (inc. Alpine v3 support)
23-
- ✅ Jump to root element in Chrome inspector (🆕)
24-
25-
**Multiple Tiers Available** 👉 [Explore Options](https://alpinedevtools.com/pricing)
23+
- ✅ Jump to root element/scroll element into view (🆕)
24+
- 🔜 Time travel debugging of $data (🆕)
2625

2726
# Alpine.js devtools
2827

-253 KB
Binary file not shown.

docs/alpine-devtools-pin-data.png

-172 KB
Binary file not shown.

docs/alpine-devtools-stores.png

-202 KB
Binary file not shown.

docs/alpine-devtools-warnings.png

-150 KB
Binary file not shown.

0 commit comments

Comments
 (0)