How to debug asynchronous code?

Question

JavaScript

All on await async with promises and other events.
A real chaos began to synchronize vuex states, it is difficult to track where, what, why.
One event overwrites the results of another, for example. Or since the system of components and modules, the event can be called twice from different modules with different parameters.
It is important to note that google dev tools breakpoints are useless as well as debugger;, everything is assembled using webpack. Vue dev tools are full of heaps of logs, it shows what and how many times it was called, for example, the UserSetLang event was called 2 times, but it is not clear from where and why, and also why the first time was EN and the second RU. Vue dev tools overlooks the source and conditions for calling an action, a mutation, a getter.
How to debug and synchronize all this? How are you doing?

Answer 1

It is important to note that google dev tools breakpoints are useless as well as debugger;, everything is assembled using webpack

A strong statement, have you heard about the source map?