Looking for a good real time debugger for Javascript

Hi, I am enjoying learning Javascript in FCC… but one thing that I find highly frustrating about the experience when I am trying to troubleshoot errors in my solutions to the challenges is that it feels like a darn black box! What I mean is that it often feels like I come up with my solution and click the “Run Tests (Cntrl +Enter)” button and I have no way of knowing what the code is actually doing, step by step behind the magic curtain. I come from a compiled (typed) languages background – heavily tainted to by too many years of neglect… but nevertheless I remember having the luxury of setting breakpoints and watching the code and watch point values change. Often observing the changes in state will help illuminate what is wrong or missing from the codes logic. So I wonder if anyone could suggest a good way of running the code through a debugger? I have asked in Gitter, but the only answer I get is “use the debugger in chrome”… Oooh… my is that an ugly interface? First of all, I don’t seem to be able to FIND the dang code… in the complicated mess of all the HTML of the FCC challenge stuff surrounding it. And the chrome console is full of apparent errors within the FCC site. What I would like to do is just be able to copy the code and paste it into something like Atom or Sublime…
So … in conclusion after my long winded paragraph… Is there any article in FCC or elsewhere that covers setting up a good debugging tool for this?

1 Like

I haven’t tried this myself, since I tend to just use console.log, but VS Code has a built in debugger.

They give it a write up here:

4 Likes

Hey Jeff,

I know just what you mean. I’ve been doing all the challenges inside my IDE. Works well, you can see everything that is going on, set breakpoints, watches, examine everything.

I don’t think it matters which one you pick, Visual Studio Code as Jackson suggests is a good one though, fully featured. A side benefit is that as you learn to code via the challenges you also learn to use an IDE at the same time.

Just as a note, I use WebStorm, but you have to buy that one… Its nice though, superb debugger.

Thanks for the tip! I didn’t know that.

@JeffGreenlee42 I do not have years of experience with compiled code like you do so I hope my answer is not inappropriate, but I have also had times where I get lost in what the code is doing. While you might not be able to add breakpoints in the way that you are accustomed with other languages, I have found that adding console.log at strategic places in my code has worked for me.

If you open the Chrome developer tools and click on the console section, there shouldn’t be all the code and the mess that you see in the other sections. That way you can specifically look for whatever items you have put in your console.log statements.

I will often put them inside of loops or conditional statements to see when that code is reached or being executed. I will also output variables to the console to track if the value has changed. I also use them when I have built my first small section of code to ensure that it is working the way I think before I move on the next chunk. Again, just sharing what works for me in the hopes that it might be of some help.

While going through the algorithms sections, I have been using https://repl.it to test my JS code and see the output in real time. I have also used Visual Studio Code and Visual Studio Ultimate for debugging.

  1. You can download a free copy of Visual Studio Community, MS free version of Visual Studio.
  2. You can also use Eclipse for debugging.

Hi all… thanks for your response! I found a solution that works really well! I use Atom, and someone showed me you can just do a cntrl-shift-I which opens the Chrome debugger… then you can just paste in the JS code right into the console and hit enter! It works best if you put in a “debugger;” statement in the code where you want it pause!!! Then you can add watches, define breakpoints and all of the usual debugging tools to figure out what is happening! It makes such a difference!

2 Likes

There is an excellent YouTube video by Chris Morrow called Debugging JavaScript - 0 to Heisenberg. It covers pretty much everything you want to know about debugging in the browser, specifically Google Chrome.

1 Like