Search code examples
sveltesapper

Debug Sapper server side

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?

Solution

  • 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:

    enter image description here

    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...)