Tab for debugging actions

[b44rd]

I was wondering if there´s ways for actions inside Vue.js to know when they are called? For instance, by listening to the dispatch method, and passing the action name and payload?

For now, I´ve been writing a custom logger in order to debug the flow from action to mutation (see https://github.com/b44rd/jsbug), which when requested (localstorage turns it on and off) can give me a me a console.log that looks like this. Items with an arrow beside it can be collapsed/expanded.

This was originally used for debugging ajax queries, that had a parameter, did some ajax, and then parsed some data. But then, I started playing around with it, placing the code inside actions and mutations as well, which gave me a really nice overview over everything that happened.

So, started thinking about it.

It could be really nice to have a actions tab inside Vue devtools, that automatically captures actions, and when an action leads to a mutation, it would be possible to follow the data all the way. For instance, when a action gets called, the action name appears in a list, like mutations are done today. Then, if/when an action commits something, it can possibly also be shown somehow. Actions might commit different mutations based on their params, so it seems quite handy to know the flow, and be able to verify that the data flow is correct all the way.

I therefor wanted to ask: Would this be a useful feature to add to Vue devtools?

[posva]

Nice output, looks really nice ✨
You should lookup issues before creating new ones 😛 #179
Since mutations are called asynchronously inside actions, there's no reliable way to associate mutations to actions, so I don't see any benefit of adding them to the devtools, if you have any suggestion, you can add it to the other thread 🙂