Alpine: Inspecting values for debugging

[Wulfheart]

Is it possible to display the current values just like in VueDebugger? This would be really helpful. Thanks in advance.

[the94air]

You mean, a DevTools for Alpine? :thinking:

[Wulfheart]

Exactly

[SimoTod]

Yeah, you can inspect it but data is a bit hidden.

In dev console (I use chrome) go to the Elements tab and click on the component you want to inspect (the tag with the x-data attribute). In the right column, where you see Styles by default, click on the Properties tab, open the first element and scroll down until you find the __x property: this is your alpine component.

If you then open it and click on $data > [[Target]] you can see the data context.

Some times, when you refresh, chrome doesn't show anything in the properties tab (I don't know why). When it happens, you need to close the dev console and open it again.

It would be good if somebody wrote an Alpine inspector to make it more user friendly.

[Wulfheart]

An Alpine Inspector would be really cool!

[calebporzio]

Agreed

[MarcelRusu]

Is there a way through the console we can currently get components and see current values?

EDIT: there is
document.querySelector('[x-data]').__x

[Wulfheart]

@MarcelRusu Unfortunately I'm getting undefined when running it in the console.

[abakermi]

@Wulfheart normally you will get something like that

[SimoTod]

A first version of the inspector is now available at https://github.com/Te7a-Houdini/alpinejs-devtools

[ryangjchandler]

Thanks for sharing the link @SimoTod, came here to do the same thing. I'm going to close this issue now though since the new inspector / developer tools are available.

If you notice any issues or bugs with the dev tools please make an issue on the correct repository. Thanks! :)