Get VScode frontend debug configuration mapped correctly

[tzjames]

Features and Changes

Frontend breakpoints now work within VS code.
Only show the Debug Fullstack option as it is the most useful.

Testing

Set a breakpoint in the frontend. Hit the page containing the breakpoint and see it stop in VS code.

[github-actions]

Your preview environment pr-1268-bttf has been deployed.

Preview environment endpoints are available at:

• https://growthbook-3000-pr-1268-bttf.growthbook.okteto.dev
• https://growthbook-3100-pr-1268-bttf.growthbook.okteto.dev

[tinahollygb]

This doesn't work for me (macOS).

I also get an alert that yarn doesn't exist but when the tasks execute, it looks like it's running fine.

[tzjames]

@tinahollygb Thanks for running this on your machine! The output you posted was from the "Debug Next.js: server-side" terminal not the "Debug Back-end" terminal where the issue was happening. The former was using type "node-terminal" while the other was using "node" type. For whatever reason your environment seems to be missing the correct path for yarn when doing the "node" type. I assume you would just need to add node's path to your path in .zprofile and then it would have worked. However I found no difference in VScode behavior between using node and node-terminal, so no I changed them both to use node-terminal. So hopefully it works for you now without doing anything else.

[tinahollygb]

I assume you would just need to add node's path to your path in .zprofile and then it would have worked.

node is already on my path. yarn is installed in /Users/tina/.nvm/versions/node/v16.14.2/bin/yarn and /Users/tina/.nvm/versions/node/v16.14.2/bin is on the path. This is configured in my ~/.zshrc. Are you sure it's that? I don't have any issues running from the terminal anywhere.

The change to node-terminal fixed it. I can break both on the backend code, and in the front-end with the sandboxed Chrome that pops up. The back-end one is helpful. The front-end one is somewhat helpful but it would be ideal to debug in an existing already-running Chrome instance, or point Chrome to it somehow. If this can be done it would be ideal so we can use the browser extensions we need (e.g. React DevTools, the GrowthBook chrome extension, etc.).

That said, this is good enough of a start.

[tzjames]

https://code.visualstudio.com/docs/nodejs/browser-debugging#_attaching-to-browsers So it runs the browser in debug mode with an argument that makes it use a different user profile. The good news though is that if you install extensions in that new browser then it will keep from one debug session to the next.