While developing with JavaScript, at times one needs to watch variable values inside the browser (Chrome, in this case) and it can be done using F12 developer tools.
However, later on, one is debugging another JS file, or another page, or simply another project; and the watched variable(s) are shown with lighter color (disabled), and the "[x]" to the right of them, which is meant to be used to remove each watched variable (i.e., once we're done with debugging that part of the JS code); does not function.
Apparently, the only variables one can remove from the watch window in the developer tools, are those which are "live" (viewable, within scope) while debugging a JS code block.
However, at times (very often) one forgets to remove them and eventually the watch window ends up with several variables no longer useful when debugging new code; and the ones one wants to watch/debug end up at the bottom of the list, having to do scroll-down to see them (imagine that scenario using [F9] step by step debug).
If it's difficult to bring back the original code one was debugging, how can we remove those no longer useful variables from the watch window in the developers tools in Chrome?
Some questions about removing JS variables asked before in stack overflow, have programatic answers (like using "unset"). This question is rather specifically about the Developer tools using [F12] and the watch window inside them.