Help with debugging JavaScript challenges

JavaScript
1

Hi,

I’ve been trying to setup the DevTools debugger to see what’s wrong with my current code in the Profile Lookup JS challenge but i’m struggling to make it work correctly. I’ve followed the guide on debugging JavaScript with browser devtools, but for some reason when I open the source map file (e.g. profile.js file based off //# sourceURL=profile.js that I added on top of the code as instructed) and try to run the debugger, a bunch of other files keep opening on top of my profile.js file, such as index or editor.main.js, and my source tab automatically switches to them. I tried adding a screenshot, but unfortunately i can’t do that yet as i’m new to the forum.

Also, as soon as I open the profile.js, the debugging menu shows me that the debugger is already running and only gives me the option to pause it, with everything else such as step over next function or step into next function call being unavailable. Adding breakpoints doesn’t make any difference.

I’ve used the CS50 IDE debugger previously for writing C programs and it really helped me understand how my code is working and what it’s doing exactly. I’d really like to be able to do the same thing for the JS challenges on FCC. If anyone has encountered similar problems, I would appreciate any advice on how to fix it or on what I’m doing wrong.

2

Are you trying to run it on the code in the editor in FCC?

3

Yes. I just add //# sourceURL=profile.js on top of the code in the editor, press F12 and find + open the file with Ctrl + P.

5

Finally managed to upload a screenshot. My internet has been a nightmare in the past couple of days.

This is what i’m getting:

DebuggingJS
DebuggingJS1368×771 124 KB

6

Afaics, the problem is that you’re dealing with the entirety of the FCC platform on top of a (in no way fully-featured) in-browser code editor. You’re trying to treat that editor as if it was just the developer tools dealing with a single script. That isn’t the case: you’re trying to debug something that is transient input, that has to be built into [static] executable code that will allow the browser tools to treat it as if it were a normal script. You can probably finagle a way to do it, it just seems a huge amount of pain for very little benefit.

If you make a basic HTML file + script file on your computer, link the script file in the HTML page & open it in a browser, the debugger and all the other debugging dev tools will work. Then just then work on the script file in a text editor.

7

That makes a lot of sense, thank you! I’ll try it out.

1 Like