Are you planning to create a Chrome DevTools extension (like Vue/React) for component debugging/state/stores/events etc?

[gplusdotgr]

I think the question is self-evident, not much to add.

I'm not sure how someone can build a complex application using components written in other frameworks and debug them without any kind of tooling in place...

[delucis]

Components written in Vue, React, etc. should work with existing browser extensions in Astro projects.

Some community members also created this “Astrospect” Chrome extension: https://chrome.google.com/webstore/detail/astrospect/pfefekfhnmbfcofpjojnpmhdakcadeil?hl=en — I haven’t tried it, but maybe it’s helpful?

[gplusdotgr]

Components written in Vue, React, etc. should work with existing browser extensions in Astro projects.

I'm importing a series of Vue components into a (pretty vanilla) node-ssr Astro app and Vue devtools don't seem to be enabled. Regression possibly?

I tried Astrospect, a little helpful for some things but relatively lacking/poor when it comes to events etc, definitely not on par with Vue devtools for example.

My use-case is a - relatively complex - component that isn't behaving as it should/expected and no easy way to debug its' behavior.

[delucis]

Got it. Would be good to work out how to get the Vue dev tools working again — definitely likely to be better than anything Astro itself could try to build for all frameworks.

[florian-lefebvre]

Astro components do not really have state so I don't think it makes sense? We have the dev toolbar API (https://docs.astro.build/en/reference/dev-toolbar-app-reference/) that allows you to write custom things for your usecase. And you can use devtools in Vue/Preact/Solid out of the box, eg. https://docs.astro.build/en/guides/integrations-guide/vue/#devtools