VSCode Debugging

[m-raschle]

Hello!

I've made some effort to finally debug the web and api side in vscode and it may be a good addition to the RADC.

Here is my current approach:

1. Update the launch.json
   { "version": "0.3.0", "configurations": [ { "name": "Launch Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:8910", "webRoot": "${workspaceRoot}/web/src" }, { "name": "Launch Firefox", "type": "firefox", "request": "launch", "url": "http://localhost:8910", "webRoot": "${workspaceRoot}/web/src" }, { "name": "Attach API debugger", "type": "node", "port": 18911, // you can change this port, see https://redwoodjs.com/docs/project-configuration-dev-test-build#debugger-configuration "request": "attach", "skipFiles": ["<node_internals>/**"], "localRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist", "remoteRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist", "sourceMaps": true, "restart": true } ] }
2. set the vscode debug.javascript.autoAttachFilter to "smart"
   "debug.javascript.autoAttachFilter": "smart",
3. restart vscode
4. run "yarn rw dev" in the integrated terminal"
5. (optional) disable the browser open in redwood.toml to avoid confusion

• Debugging is only possible through the launched browsers with devtools

7. run the debug configuration "launch chrome"
8. Happy Debugging 🥳

[adriatic]

Terrific news, Maximilian. I will verify it right away and publish it Thank you - many developers will be happy Sent from my iPadOn Dec 7, 2022, at 4:52 AM,

…

--- Maximilian Raschle ***@***.***> wrote: Hello! I've made some effort to finally debug the web and api side and it may be a good addition to the RADC. Here is my current approach: Update the launch.json { "version": "0.3.0", "configurations": [ { "name": "Launch Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:8910", "webRoot": "${workspaceRoot}/web/src" }, { "name": "Launch Firefox", "type": "firefox", "request": "launch", "url": "http://localhost:8910", "webRoot": "${workspaceRoot}/web/src" }, { "name": "Attach API debugger", "type": "node", "port": 18911, // you can change this port, see https://redwoodjs.com/docs/project-configuration-dev-test-build#debugger-configuration "request": "attach", "skipFiles": ["<node_internals>/**"], "localRoot": ***@***.***/api-server/dist", "remoteRoot": ***@***.***/api-server/dist", "sourceMaps": true, "restart": true } ] } set the vscode debug.javascript.autoAttachFilter to "smart" "debug.javascript.autoAttachFilter": "smart", restart vscode run "yarn rw dev" in the integrated terminal" (optional) disable the browser open in redwood.toml to avoid confusion Debugging is only possible through the launched browsers with devtools run the debug configuration "launch chrome" Happy Debugging 🥳 —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[m-raschle]

Thank you for your response!

For your information.
I've tried to set it up with the setting
"debug.javascript.autoAttachFilter": "onlyWithFlag"
and in package.json
"scripts": { "debug": "NODE_OPTIONS='--inspect' yarn rw dev" },
to avoid attaching the debugger if not necessary.

for instance with yarn rw storybook.

sadly this doesn't work with vscode at the moment.
the node options inspect seems to expect a single node process and isn't able to choose a free port for every concurrently run process.

[adriatic]

hi, @m-raschle

I was not able to make sense of your original post. Here are my comments:

1. The text for your proposed launch.json is formatted without any line breaks - it needed my editing in order to verify how the debugger will run using it.
2. The debugger port is incorrectly set as 8910, when it should be 18911
3. Firefox debugger type is not acceptable (error message issued is The debug type is not recognized. Make sure that you have a corresponding debug extension installed and that it is enabled

There are other issues that I do not want to discuss before resolving the above three, so if I misunderstood your intentions, please explain

[m-raschle]

hi @adriatic

I'll try to answer everything first and add some further details at the end.

1. This is the formatted launch.json from the original post. I'm still a little new to git and apologize for that.

{
  "version": "0.3.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8910",
      "webRoot": "${workspaceRoot}/web/src"
    },
    {
      "name": "Launch Firefox",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:8910",
      "webRoot": "${workspaceRoot}/web/src"
    },
    {
      "name": "Attach API debugger",
      "type": "node",
      "port": 18911, 
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "localRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
      "remoteRoot": "${workspaceFolder}/node_modules/@redwoodjs/api-server/dist",
      "sourceMaps": true,
      "restart": true
    }
  ]
}

2. The port for the api configuration is 18911. The port in the url for the web configurations is 8910.
   Both are default values of RedwoodJS according to the doc reference App Configuration and they are correct unless you've changed anything locally.

3. Yes, the firefox debugger has to be installed to use the configuration. The chrome debugger is preinstalled in vscode since 2016.
   I'd of course understand it if you remove the firefox configuration in favor of the preinstalled chrome so that it works out-of-the-box for everyone. For demonstration purposes I have sent it along anyway. Personally, I think there is a bit of bias in the choice of the preinstalled debuggers.

Further details..

The two debug guides from you @adriatic (here) and danny (here) were the most elaborate I could find. The api configuration is even included in the redwood pkgs (commit).

The problem with the provided launch.json configurations is that you can't debug directly inside vscode and need to use the chrome devtools. When trying to add breakpoints inside vscode you end up with "unbound breakpoints" because vscode can only debug web sources running in either the preinstalled chrome debugger or others.

[adriatic]

The two debug guides from you @adriatic (here) and @danny (here) were the most elaborate I could find.

This is likely true, but you need to be aware that this description is just a part of what I am planning to write. Here is a rough sketch of my plan for the next few days:

1. Rewrite the section Setup the Chrome debugger to make it obvious that this scenario does not include VSCode anywhere.

2. Write the analogous section that uses the [VSCode debugger](Setup Visual Studio Code debugger) - section 4 from Setup. This section will not use any of Chrome debugger.

3. Write the new section Example of use the VSCode debugger - section 5 from Setup.

With these in place, we will see how one can use Chrome debugger or VSCode debugger in the task of front and RW app debugging.

A lot more coming next, the above plan (1, 2, and 3) should give us a common understanding of what we are dealing with here.