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

Solved

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

zhicheng1
Shopify Partner
28 2 7

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?

Accepted Solution (1)

zhicheng1
Shopify Partner
28 2 7

This is an accepted solution.

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

View solution in original post

Replies 7 (7)

zhicheng1
Shopify Partner
28 2 7

This is an 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
Shopify Staff
2807 310 805

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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

GeorgeHoffman
Shopify Partner
27 0 4

can you put any more details?

ShopifyDevSup
Shopify Staff
1451 238 497

Hey @GeorgeHoffman

 

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

Developer Support @ Shopify
- Was this reply helpful? Click Like to let us know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

GeorgeHoffman
Shopify Partner
27 0 4
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
Shopify Partner
1 0 0

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

 

k1ltr0_0-1720469705402.png

k1ltr0_1-1720469792800.png

This will open a terminal with command and debugger attached

k1ltr0_2-1720469853793.png

 

 

GeorgeHoffman
Shopify Partner
27 0 4
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.