React-starter-kit: What is the recommended way to debug the server?

[joenot443]

Hi all -

I'll preface this by saying I'm relatively new to react development, so forgive my ignorance.

I'd like to be able to use node-debugger, or a similar tool, to debug line by line what's going on from the server.js entrypoint.

From what I understand, it's first being transpiled using babel-node, so source map would be required for debugging to work correctly.

I'd love to be able to use the built in debugger for VS Code, but if this isn't possible I'm a-okay using the Chrome node debugger.

I've read up on some previous issues, but I haven't been able to find an exact consensus on this.

Thanks!

[langpavel]

At first, try set DEBUG=* environment variable, then see how it works at debug package page.
This is not debug, but log, but it can help you a lot :slightly_smiling_face:

[mathieux51]

Personnally, I added a new script in package.json:

"scripts": {
   ...
    "start": "babel-node tools/run start",
    "debug": "babel-node $NODE_DEBUG_OPTION tools/run start --inspect"
  }

Now I can go yarn run debug and debug the server with Chrome devtools by clicking on the Node logo.

[langpavel]

@mathieux51 Nice idea. It is all needed to get this work?
What is $NODE_DEBUG_OPTION here?

[mathieux51]

$NODE_DEBUG_OPTION is used by WebStorm, I left it there just in case I need to debug with WebStorm but I like the Chrome devtools better.

It's all I need to make it work 🎉.

_N.B._ It's worth mentioning that one time I had to restart my computer (after trying a lot of things) because the Chrome debugger didn't want to stop on breakpoints on server side code. After the restart, everything worked as expected and it still does.