0

I've got a small app that uses Express. I want to debug some client side js code that calls my backend, but it seems that when I try to debug my app using localhost:8888, all my client side js breakpoints go grey.

I'm speculating it's something with the configuration, but I don't really know.

I'm currently debugging in VSCode using ctrl + shift + p -> debug open link.

With my server running, I try to debug "http://127.0.0.1:8888/frontend/frontend_3_26/web-api-auth-examples/authorization_code/public/index.html"

which hits my breakpoints in js.

But, when I try to debug "http://localhost:8888", my breakpoints are greyed out and my breakpoints don't get hit.

Not sure if this will help, but attached is what I see in Chrome developer tools.

So, maybe it's an issue that localhost can't locate the right files? I've been messing around with launch settings, but I'm lost.

Could someone please help me out here? I'd greatly appreciate it.

Thanks!

https://i.stack.imgur.com/Pkzee.png

DJG
  • 65
  • 8
  • Not an answer here, but Chrome's debugger works really well. So I find that debugging Node in VS, and clientside in Chrome is much nicer, the separation seems to help.. Also the biggest issue I had is that when node process restarted you had to respawn the browser in VS, something you don't need to do if using Chrome. – Keith Mar 27 '22 at 07:45
  • Thanks for the input! I appreciate the response. – DJG Mar 27 '22 at 19:53

1 Answers1

0

Fixed my issue.

It was because I wasn't telling my server where to look for my client side code which is done by doing this:

app.use(express.static(path.join(__dirname, 'public')));

These posts helped me and go more into detail:

nodejs/express include local js file

JS file gets a net::ERR_ABORTED 404 (Not Found)

This one helped especially because of the detailed explanation of the file structure: Can someone please explain how static files in express js work?

DJG
  • 65
  • 8