How to debug code with Atom?

Community
1

Hello everyone… sorry if this might be a stupid question, I swear I tried googling for it but I am stumped.

I am super new to anything coding, and I am taking the Web Development path.
To practice I was going to make an RGB-guessing minigame using HTML, CSS and JavaScript. I am doing this using Atom.

My worst coding enemy is my dumb fingers. 90% of my time is spent scouring my code for typoes. The problem is that if the code is wrong it does not return error messages, stuff simply stops working altogether.

Is there a way to add some debugging function to Atom that will look at my code (possibly for all three HTML, CSS and js, but js alone would already be immense help) and return error messages like “I was expecting brackets//this variable does not exist//wtf did you just type”?

For now I have installed the ide-ui package, and the typescript language package. I was very hopeful to see a “Debugger” tab but it says there is no debugger attached. I tried looking at debugger packages to install but they all seem to relate to other languages (python etc…)

Help a noob? ^^

edit: spelling, of course. d’oh.

2

I highly recommend you to install atom-ide package and search for javascript-IDE. When you run code, you should see error messages and typos on the diagnostic bar. Be sure to toggle it on using the hotkeys provided at docs.

3 Likes
3

THANK YOU!
I… had not realised the window I needed to toggle would be “Diagnostics”. I was looking at runner, debugger, and all sorts of other stuff.
You 100% solved my derpiness.

Incidentally, is there a way to have something similar also for HTML and CSS ?

1 Like