How do you make breakpoints work inside your vscode developm Cal.com, Inc. #developers

How do you make breakpoints work inside your vscod...

Frederic Christ

02/24/2022, 10:53 AM

How do you make breakpoints work inside your vscode development setup? I'm trying to hunt a bug regarding

caldav

. For instance in

apps/web/lib/integrations/calendar/service/BaseCalendarService.ts

Demian N

02/24/2022, 10:58 AM

Hi @Frederic Christ. What do you mean by breakpoints? Debugging?

Frederic Christ

02/24/2022, 10:58 AM

Hi @Demian N. Yes, exactly

Frederic Christ

02/24/2022, 11:45 AM

I found the corresponding issue on https://github.com/vercel/next.js/issues/30435 What do you use to debug server-side code?

Demian N

02/24/2022, 2:09 PM

I found some bugs with vscode debugger missing to hit on my breakpoints from time to time. This was so often that I started doing it my own way which is placing a

debugger

sentence on where I want to catch the execution of the code and then use the STEP through commands. I know is not ideal but as debugger gets compiled always with your source code, you kind of asure that it will break in there.

Demian N

02/24/2022, 2:13 PM

All in all, server side debugging use to worked well for me, but when using the spawn chrome browser for client side debugging I frequently got the error of missing target, and I have to retry once again. So the experience is not always pleasant. In terms of Cal, the settings that are already in place for client-server-full-stack debugging worked well for me. They are in fact copied from vercel recommended settings for debugging a nextjs app so all good with that. Are you facing troubles with it?

Demian N

02/24/2022, 3:01 PM

Screencast from 24-02-22 11:57:39.webm

Demian N

02/24/2022, 3:08 PM

🖕I'm server-side debugging index.tsx so you can better see my point. Breakpoints were not caught, debugger statements did. The cons of this way is that you can not easily turn on/off debugger statements as with breakpoints with its own panel, and you have to remember to remove them from the source. But if there is no alternative ... True is that vscode issues aren't always cross-platform. The above example ran in vscode for linux.

Frederic Christ

02/25/2022, 1:56 PM

Hey Demian, thanks for taking the time and looking into it. Yes, I have problims with the recommended settings from vercel and there seems to exist an upstream issue. I tried it with the `debugger`statement, but unfortunately it doesn't work for me either. I'm also running vscode on Linux. What version of

node

do you use?

Frederic Christ

02/25/2022, 2:18 PM

I just removed

"NODE_OPTIONS='--inspect'

from

<http://scripts.dev|scripts.dev>

in`package.json` and now it works with

debugger;

. Thank you for your help! I initially added this, because it's inside the guide https://nextjs.org/docs/advanced-features/debugging#server-side-code

Demian N

02/25/2022, 5:22 PM

I'm very glad I helped you but if you are aimed to debug Cal, all working vscode settings are clone within the repo.

👍 1

4 Views

Open in Slack

Previous Next