react-redux-universal-hot-example
react-redux-universal-hot-example copied to clipboard
erikras
Debugging in Webstorm
Hi,
Fantastic project. I want to use it as a boilerplate for something I'm working on to save time in getting all the tooling right but finding it difficult to set up a debugging dev session for the api server using Webstorm. I've added a new configuration in Webstorm to run npm dev and edited package.json to look like this
"start-dev-api": {
"command": "node $NODE_DEBUG_OPTION ./bin/api.js",
"env": {
"NODE_PATH": "./api",
"NODE_ENV": "development",
"APIPORT": 3030
}
}
If I click run normally then everything runs ok and I can view the project at localhost:3000 but when I click debug run it just drops out to
[2] ==> 🌎 API is running on port 3030
[2] ==> 💻 Send requests to http://localhost:3030
[1] ----
[1] ==> ✅ xyz is running, talking to API server on 3030.
[1] ==> 💻 Open http://localhost:3000 in a browser to view the app.
Process finished with exit code 130
does anyone have any pointers on how I could make this work?
@ballwood Can you confirm that using babel-node worked? Would you also describe the Run > Edit configurations... settings you used to use the Webstorm debugger? Thanks.
@richb-hanover I tried with babel-node and it worked. Although it requires me to debug from terminal. I would like to debug from webstorm itself.
I tried to use babel-node from webstorm but I got no success
/Users/sample/node_modules/.bin/babel-node --debug-brk=59407 --expose_debug_as=v8debug /Users/sample/bin/api.js
env: node: No such file or directory
Process finished with exit code 127
I can't get debugging within Webstorm working either.
Running the npm run dev config works fine in Webstorm:
/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run dev
> [email protected] dev /Users/jason/code/react/pickems
> concurrent --kill-others "npm run watch-client" "npm run start-dev" "npm run start-dev-api"
[0]
[0] > [email protected] watch-client /Users/jason/code/react/pickems
[0] > better-npm-run watch-client $NODE_DEBUG_OPTION
[0]
[1]
[1] > [email protected] start-dev /Users/jason/code/react/pickems
[1] > better-npm-run start-dev $NODE_DEBUG_OPTION
[1]
[2]
[2] > [email protected] start-dev-api /Users/jason/code/react/pickems
[2] > better-npm-run start-dev-api $NODE_DEBUG_OPTION
[2]
[0] running better-npm-run in /Users/jason/code/react/pickems
[0] Executing script: watch-client
[0]
[0] to be executed: node webpack/webpack-dev-server.js
[1] running better-npm-run in /Users/jason/code/react/pickems
[1] Executing script: start-dev
[1]
[1] to be executed: node ./bin/server.js
[2] running better-npm-run in /Users/jason/code/react/pickems
[2] Executing script: start-dev-api
[2]
[2] to be executed: node ./bin/api.js
[1] (node:73527) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[0] ==> 🚧 Webpack development server listening on port 3001
[0] (node:73526) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[1] [webpack-isomorphic-tools] [error] `.development()` method is now deprecated (for server-side instance only, not for webpack plugin instance) and has no effect. Set up a proper `process.env.NODE_ENV` variable instead: it should be "production" for production, otherwise it assumes development. The currently used mode is: development. `process.env.NODE_ENV is: development
[1] (node:73530) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[2] (node:73529) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[2] ----
[2] ==> 🌎 API is running on port 3030
[2] ==> 💻 Send requests to http://localhost:3030
[1] ----
[1] ==> ✅ Pick-ems is running, talking to API server on 3030.
[1] ==> 💻 Open http://localhost:3000 in a browser to view the app.
[0] Hash: dde6978d936d550fc11a
[0] Version: webpack 1.14.0
[0] Time: 25042ms
[0] Asset Size Chunks Chunk Names
[0] 674f50d287a8c48dc19ba404d20fe713.eot 166 kB [emitted]
[0] f4769f9bdb7466be65088239c12046d1.eot 20.1 kB [emitted]
[0] fa2772327f55d8198301fdb8bcfc8158.woff 23.4 kB [emitted]
[0] e18bbf611f2a2e43afc071aa2f4e1512.ttf 45.4 kB [emitted]
[0] 89889688147bd7575d6327160d64e760.svg 109 kB [emitted]
[0] 448c34a56d699c29117adc64c43affeb.woff2 18 kB [emitted]
[0] af7ae505a9eed503f8b8e6982036873e.woff2 77.2 kB [emitted]
[0] fee66e712a8a08eef5805a46892932ad.woff 98 kB [emitted]
[0] b06871f281fee6b241d60582ae9369b9.ttf 166 kB [emitted]
[0] 912ec66d7572ff821749319396470bde.svg 444 kB [emitted]
[0] main-dde6978d936d550fc11a.js 9.63 MB 0 [emitted] main
[0] webpack built dde6978d936d550fc11a in 25042ms
But running npm run dev in debug mode always ends abruptly about 5 seconds after things seems to be up and running (note how there is no sign of Webpack outputting its builds).
/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run dev
To debug the "dev" script, make sure the $NODE_DEBUG_OPTION string is specified as the first argument for the node command you'd like to debug.
For example:
{ "start": "node $NODE_DEBUG_OPTION server.js" }
> [email protected] dev /Users/jason/code/react/pickems
> concurrent --kill-others "npm run watch-client" "npm run start-dev" "npm run start-dev-api"
[1]
[1] > [email protected] start-dev /Users/jason/code/react/pickems
[1] > better-npm-run start-dev $NODE_DEBUG_OPTION
[1]
[0]
[0] > [email protected] watch-client /Users/jason/code/react/pickems
[0] > better-npm-run watch-client $NODE_DEBUG_OPTION
[0]
[2]
[2] > [email protected] start-dev-api /Users/jason/code/react/pickems
[2] > better-npm-run start-dev-api $NODE_DEBUG_OPTION
[2]
[1] running better-npm-run in /Users/jason/code/react/pickems
[0] running better-npm-run in /Users/jason/code/react/pickems
[1] Executing script: start-dev
[1]
[1] to be executed: node ./bin/server.js --debug-brk=65314 --expose_debug_as=v8debug
[0] Executing script: watch-client
[0]
[0] to be executed: node webpack/webpack-dev-server.js --debug-brk=65314 --expose_debug_as=v8debug
[2] running better-npm-run in /Users/jason/code/react/pickems
[2] Executing script: start-dev-api
[2]
[2] to be executed: node ./bin/api.js --debug-brk=65314 --expose_debug_as=v8debug
[1] (node:73503) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[0] ==> 🚧 Webpack development server listening on port 3001
[0] (node:73504) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[1] [webpack-isomorphic-tools] [error] `.development()` method is now deprecated (for server-side instance only, not for webpack plugin instance) and has no effect. Set up a proper `process.env.NODE_ENV` variable instead: it should be "production" for production, otherwise it assumes development. The currently used mode is: development. `process.env.NODE_ENV is: development
[1] (node:73507) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[2] (node:73506) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr)
[2] ----
[2] ==> 🌎 API is running on port 3030
[2] ==> 💻 Send requests to http://localhost:3030
[1] ----
[1] ==> ✅ Pick-ems is running, talking to API server on 3030.
[1] ==> 💻 Open http://localhost:3000 in a browser to view the app.
Process finished with exit code 130 (interrupted by signal 2: SIGINT)
I've tried multiple variants of the npm scripts in package.json. The results above are from using the scripts as the following:
"scripts": {
"start": "concurrent --kill-others \"npm run start-prod\" \"npm run start-prod-api\"",
"start-prod": "better-npm-run start-prod",
"start-prod-api": "better-npm-run start-prod-api",
"build": "better-npm-run build",
"postinstall": "npm run build",
"lint": "eslint -c .eslintrc src api",
"start-dev": "better-npm-run start-dev $NODE_DEBUG_OPTION",
"start-dev-api": "better-npm-run start-dev-api $NODE_DEBUG_OPTION",
"watch-client": "better-npm-run watch-client $NODE_DEBUG_OPTION",
"dev": "concurrent --kill-others \"npm run watch-client\" \"npm run start-dev\" \"npm run start-dev-api\"",
"test": "karma start",
"test-node": "./node_modules/mocha/bin/mocha $(find api -name '*-test.js') --compilers js:babel-core/register",
"test-node-watch": "./node_modules/mocha/bin/mocha $(find api -name '*-test.js') --compilers js:babel-core/register --watch"
},
I haven't tried babel-node... I'll give that a whirl.
Same problem here - @jasonworden @gmadar were you able to figure out a solution?
@eric-xujun @stephshelley - try:
"start-dev-api": { "command": "node $NODE_DEBUG_OPTION --expose_debug_as=v8debug --debug ./bin/api.js", "env": { "NODE_PATH": ".:./api", "APIPORT": 3030 } },
in the better-npm script. I haven't tested it but a colleague of mine said it worked for him