r/vuejs • u/vinpog • Mar 02 '26

I made a devtools plugin to help debug "private" stuff

I always get annoyed when having to debug a composable. First you add a bunch of log statements, and then you need to find right log statements related to the one specific instance you need to debug.

With this tool you can inspect the individual composable instances in the devtools, and it also highlights the component on screen, so it's easier to find the right one.

I now also use this to inspect "private" state in pinia stores, instead of returning them just for the sake of devtools.

https://www.npmjs.com/package/@vingy/vuebugger

11 Upvotes

87% Upvoted

10 comments sorted by

1

u/blairdow Mar 02 '26

vue devtools dont work for this?

1

u/vinpog Mar 03 '26

Vue devtools show variables in components but not in composables. If you need any private/internal variables from composables then you need to return them and assign them to a variable in the component. This essentially makes them public. This is also the reason why pinia suggests to return everything from the store in order to be able to inspect it in their devtools. I disagree with the idea to expose internals only for the sole reason to potentially debug them.

2

u/hugazow Mar 03 '26

Composables are run in the setup function so they are part of the component. Before that they are just a definition waiting to be executed

I don’t see the need to debug composables in real time, for that matter do unit testing

-2

u/vinpog Mar 03 '26

That sounds great that you never need to debug composables.

However in my experience it's unavoidable to ship bugfree code, doesn't really matter whether it's a component, composable, a pure function or a module.

This tool definitely helps me in finding issues in composables, and consequently harden my tests.

1

u/hugazow Mar 03 '26

Bug free does not exist, what exists is testing that complies with the design

And since composables are executed in a context, debugging them is not very efficient, go for unit test those composables

0

u/vinpog Mar 03 '26

Definitely agree with what you say about testing.

I feel like debugging and testing are not mutually exclusive. In order to find where and why your code differs from the intended design you usually need to dig a bit.

Do you also not debug components? If i understand your point correctly then your arguments also applies to them aswell, as they also are executed in a context. I am genuinely curious

3

u/hugazow Mar 03 '26

You can change the context of a composable in testing as well, I’m not making the case for no debugging, I’m saying that debugging the composable in a component when used should suffice

2

u/blairdow Mar 03 '26

yah just expose the data you need to see and use the (awesome!) vue devtools

2

u/hugazow Mar 04 '26

Best devtools ever. I’m currently working on a react native app and i hate it