Debug Sapper server side

Question

I am trying to figure it how to debug the server side to do some modifications to the default sapper template, I followed the instructions to debug the server side from the docs, and the ndb opens correctly, but the only file that appears loaded in the gui is the webpack.config.js file:

screenshot

There is something else that I need to configure to debug the server.js file?

Burt

Answer 1

The ndb method from the docs didn't work on my machine either, so I just do it old school.

In package.json, we learn that npm run dev actually runs sapper dev.

The sapper executable is located in your node_modules/.bin directory and, like most cli in js packages, can be run with node like this: node node_modules/.bin/sapper.

We can add the --inspect or --inspect-brk flag to node to launch the debug server:

node --inspect-brk node_modules/.bin/sapper dev

Great, now you need to fire the node's debugger. Easiest way to do that is to launch Chrome (yes the browser), open the dev tools on any page that you have in there, and click the little green nodish icon that has appeared in the dev tools:

The node debugger will pop up, and then... Debug!

(Maybe start with some debugger keywords, 'cause breakpoint tends to be very flaky in this tool...)

Chinkiang

Answer 2

To get @rixo's suggestion working on a windows 10 machine I had to do following:

Add following to scripts section of package.json

"debug_server": "node --inspect-brk node_modules/sapper/sapper dev"

Then I could run

npm run debug_server

from command line.

Ingratiating

Answer 3

I finally got this working in a simple way.

At the bottom, (in vscode) I went to terminal and ran npm run dev.

The debugger auto attached and breakpoints started hitting.

Haven't tried client-side yet, but server-side is working great.

Danged