React-redux-universal-hot-example: About debugging

[penguin3069]

Here is a stupid question I have.I don't know how to debug the server-side code,I've tried node-inspector and Webstorm,and neither works well.Is there anyone can give me some help?

[welljs]

with console.log only :-( I have same problem too

[penguin3069]

@welljs It's annoying,wish some sharp guys to solve it.

[jordanh]

+1 to this. I've dug into this this weekend and haven't been able to solve it. In particular, I'm interested to debug the api server.

I've tried:

1. Sending SIGUSR1 to the node ./bin/api.js process and attaching with node-inspector
2. Killing the same process and restarting it on the command-line with NODE_ENV="development" NODE_PATH="./api" APIPORT=3030 node debug ./bin/api.js
3. Doing the same and moving node's debug port with NODE_ENV="development" NODE_PATH="./api" APIPORT=3030 node debug --debug=7000 ./bin/api.js

When I tried 3 from above, I also tried attaching with node-inspector like this:

$ node-inspector -p 8081 -d 7000

node-inspector runs and shows me the source, but I'm unable to break or step through code.

Version info:

• node 5.3.0
• node-inspector 0.12.5

Anybody out there able to get backend debugging working on this boilerplate?

[penguin3069]

@welljs @jordanh
I chaned some code,and it can be debugged now.I don't think what I've done is a good way to do this,happy to discuss it with you guys.Here is the code--https://github.com/penguin3069/react-redux-universal-hot-example-debug/

[jordanh]

@penguin3069 funny, I'm not seeing the same trouble as you are. My debugger has no issue resolving the paths of source files, rather it won't stop at breakpoints. Anybody else seeing this?

[penguin3069]

@jordanh I met same question as you --- "node-inspector runs and shows me the source, but I'm unable to break or step through code.".
I had to change some code,and I can debug the code now,but other problems emerge.

[randavidovitz]

Personally i had tons of issues with debugging the development mode, since its using the pipes which opens two ports (and idea only attach to one port n debugger)

Basically you need to run node --debug so that it will listen on the port and than use debugger such as inspector, IntelliJ/WebStrom

You will need latest version of Idea or Webstorm since there was a bug that prevented you from being able to set breakpoint on correct lines of code, since it didn't take into account the bable transpile - latest version allows you to see your code and set correct break points !

If anyone was able to debug using production mode, let me know

[jmarceli]

For me the best option right now is to use mocha CLI debugger (it works similar to Ruby Pry - which I really like to use for Ruby projects). Of course it is only for mocha tests. In order to use it add debug as an mocha argument.
Example (from my modified package.json):

./node_modules/mocha/bin/mocha debug $(find api -name '*-test.js') --compilers js:babel-core/register --watch

and add debugger; line inside your test.

I hope it will help someone.

[hanjukim]

I could debug with node-inspector.

1. Add "sourcesMaps": "both" in .babelrc file.
2. Change "piping" module to nodemon for hot reloading
3. run node-inspector node-inspector&
4. run with API server with nodemon --debug=5858 --nolazy -w ./api ./bin/api.js
5. open browser http://localhost:8080/?port=5858

[snackycracky]

hey @hanjukim,
for point 1 I get an error saying that sourcesMaps is an unknown option, but I am using the latest babel-core module.
Also Point 2 is unclear.
I have a huge interest in your findings. Could you please push the necessary changes somewhere or paste a diff here or even make a pull request with a new npm task like npm run dev-debug ?

Besides from this I am able to debug in production by attaching to the running process:

node debug -p pidOfNodeServer which is documented here: https://nodejs.org/api/debugger.html#debugger_advanced_usage

But then you step through some clumsy ES5 code, which is very inconvenient. But still works...

[hanjukim]

Hi @snackycracky,
Sorry for unclear steps.

I hope this branch can be helpful. I have found that sourceMaps option is not needed.

1. nodemon should be installed npm install -g nodemon
2. Run node-inspector
3. npm run dev-debug
4. Open browser to node-inspector
5. You can set break point at original.js.source file in original (pre-transpiled) ES6 source.

[snackycracky]

+1 this is confirmed working.

Please open a pr with that branch.

I had to update to node-inspector to the latest version.

On 21 Apr 2016, at 13:04, Hanju Kim [email protected] wrote:

Hi @snackycracky https://github.com/snackycracky,
Sorry for unclear steps.

I hope this branch https://github.com/styleket/react-redux-universal-hot-example/tree/node-inspector can be helpful. I have found that sourceMaps option is not needed.

Run node-inspector
npm run dev-debug
Open browser to node-inspector
You can set break point at original.js.source file in original (pre-transpiled) ES6 source.
—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub https://github.com/erikras/react-redux-universal-hot-example/issues/830#issuecomment-212859562

[chosenvictim]

With Visual Code, node debugging is as simple as putting breakpoints in browser. Try that

[harshayburadkar]

@hanjukim Amazing thanks a lot you saved me a lot of time.