How to debug Java Script with preview

Hi colleagues, since I want to avoid any Microsoft products, I decided to use Atom as the only alternative with really free code and license.
I simply want atom to show me different variables, how my numbers and strings change, how the loops work and so on, via breakpoints and debugging.

The user experience so far is terrible. Instead of writing code from the first day, it took me an hour to realize that I had to install a script package in order to have the great honor of running code through atom … many similar names of different packages also don’t help me much. There are almost always 2 packages with almost identical names.

So far I have put all sorts of new packages and they almost never work. I only use Atom-Beautify and atom-jshint, and I will remove the latter because it doesn’t matter if it’s on or not. In general, working with packages in Atom is a complete hell …

So now my biggest problem is that I can’t turn on debugging or break point. I put all kinds of packages and either they don’t work or when they leave they don’t help me with anything / they are useless.
The latest one I installed was xatom-debug and I lasted half an hour to understand it wanted to specify where it putted the node package. After that it runs, but doesn’t care about my break points. Whatever I do I can make it only run to the end and not show me different variables, how my numbers and strings change, how the loops work and so on.

Can anyone guide me what packages are put for debugging and in general which packages to put and how to use them to work with Java Script.