How to debug in visual studio code when running a backend shopify app?

[zhicheng1]

I'm making a sales channel app which requires running a backend server.  Is there anyway to debug this app while I am running locally?  The problem is the app is launched from shopify.exe and even though it runs nodejs somewhere down the line, visual studio seems unable to debug with it.  Is there anything that can be done?

[zhicheng1 · Accepted solution]

Hey I managed to do it and it was easy.  Just go to run->add configuration and then add a "node" configuration.

[Liam]

Glad you figured this out Zhicheng1 - thanks for coming back to update this post 🙂 

[GeorgeHoffman]

can you put any more details?

[ShopifyDevSup]

Hey @GeorgeHoffman , 

Are there any additional details you're specifically looking for? 

[GeorgeHoffman]

The accepted answer might work but its vague and I'm not sure how to implement it. What does it mean to add a node configuration. An example configuration would be very helpful. I tried several things to debug local plugins and fear the issue is maybe it transpiles to WASM which I don't think VS code understands. When I set breakpoints in the source code it says the breakpoint is not connected and never triggers. The WASM output is binary and not possible to set a breakpoint. Or maybe there is some way to add a source map similar to how compiled javascript works. A clear example or documentation would be amazing on how to debug checkout functions. When working with the new plugins we have to rely on the partner console output but what happens if your method is not firing at all so there is no output.

[k1ltr0]

I just did click on show al configurations and then selected the dev script from package.json

This will open a terminal with command and debugger attached

[GeorgeHoffman]

It's something I had tried. I don't see any breakpoints getting hit no matter what I do which is why I asked. Maybe it only works in certain version of VS code or maybe there was some change on the Shopify side. I moved on to other projects so maybe will try again someday.

[tomcomtech]

I also can't hit any breakpoints. Anyone any ideas? 

[egdevelopment]

Here are the steps that worked for us:

1. In VS Code, hit F1 and type add Configuration and choose the option Debug: Add Configuration to open the launch.json file.

2. In the launch.json file, add this in your configurations array. You might want to tweak it depending on your package manager and folder structure (this is working with yarn and the package.json at the root of our workspace folder). The "yarn dev" script looks like this in our package.json file "dev": "shopify app dev"

{
      "type": "node-terminal",
      "request": "launch",
      "name": "Debug Shopify App",
      "command": "yarn dev",
      "cwd": "${workspaceFolder}"
    }

3. Click on the Debug icon in VSCode, then select your newly added configuration and hit play. It will start your debug session and you will be able to hit breakpoints

[sauzer77]

I tried this, but when I try to select a breakpoint it, says that it's unbound.

I followed the instructions, but my "command "is not `yarn dev`, but it's `shopify theme dev`.

Maybe there is another setup I need to do to my environment to make it work with yarn or npm?

[k1ltr0]

I think breakpoints doesn't work in code running in front end, just in the code running in backend like loader or action functions. you may try writting a line witgh the word debugger and open the developer console in the web browser to check if the code stops there.