I can never get watched variables to work. The scoping and updating rules for it are a mystery to me. I assume only global variables can be watched, but even then it never works as I expect, so I end up just flooding the log with values when testing.
I've thought for years the console should add Data.gui [1] style UI for viewing/testing variable and settings values. You can see it action on this CodePen [2].
I've had the same frustration. The browsers have such great debugging features, in theory, but they never seem to work reliably. I can't even get all of my breakpoints to reliably hit.
Everything seems to work ok when the code is unrolled but as soon as it gets bundled, even if not minified, it seems that a lot of debugger features get broken, at least that's been my experience.
Note: I'm not a front-end engineer and I'm probably doing something wrong.
Disable source maps in the debugger. They are likely the source of your frustration and frankly I still do not understand why they are on by default given how bad the experience is of actively debugging with them on.
Even though minified variables appear under the correct name in the sidebar panel in chrome I still get an error that they're undefined in a watchpoint, which is annoying.
I've thought for years the console should add Data.gui [1] style UI for viewing/testing variable and settings values. You can see it action on this CodePen [2].
1. https://github.com/dataarts/dat.gui
2. https://codepen.io/russellbeattie/full/kGxaqM