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

CodePudding user response：

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?