debug Webstorm package.json that calls `npx nps <script>` with multiple projects running

We have this `package.json`:

 

"scripts": {
    "start": "npx nps local",

    ...

}

And the package-scripts.json contains:

 

local: {
      description: 'Creates a local environment for development',
      default: series(
        'cp -n .env.local.dist .env.local || true',
        'npx nps clean',
        'npx nps local.start',
      ),
      start: concurrent({
        bootstrap: series(mkdirp('.bootstrap'), 'npx nps local.bootstrap'),
        macroui: 'npx nps local.macroui',
        microui: series(mkdirp('.microui'), 'npx nps local.microui'),
        express: 'npx nps local.express',
      }),
      bootstrap: `cross-env BABEL_CONTEXT=client npx webpack -w --mode production --host 0.0.0.0 --config ./webpack.bootstrap.dist.js`,
      macroui: `cross-env NODE_ENV=development ENV_ID=local npx webpack-dev-server --host 0.0.0.0 --config ./webpack.macro.dev.js`,
      microui: `cross-env NODE_ENV=development ENV_ID=local BABEL_CONTEXT=client npx webpack -w --mode development --host 0.0.0.0 --config ./webpack.micro.dev.js`,
      express: `cross-env NODE_ENV=development ENV_ID=local BABEL_CONTEXT=server nodemon --watch srv --exec babel-node srv/boot.js`,
    },

 

I can create a configuration with `npx nps local` and hit `run` to have the multiple processes start correctly.

But hitting `debug` fails to start them correctly and of course debugging isn't working.

Does anyone have any suggestions for how to get this to start under the debugger?

0
6 comments

>hitting `debug` fails to start them correctly and of course debugging isn't working.

please could you elaborate on this? what do you mean saying that they don't start correctly?

0

Here is what the run console looks like when it is started with 'run':

/Users/Brooke.smith/.nvm/versions/node/v14.19.0/bin/npm run start

> soar-checkout-micro-ui@0.1.0 start /Users/Brooke.smith/dev/soar-checkout-micro-ui
> npx nps local

nps is executing `local` : cp -n .env.local.dist .env.local || true && npx nps clean && npx nps local.start
nps is executing `clean` : node node_modules/nps-utils/node_modules/rimraf/bin.js ./.microui && node node_modules/nps-utils/node_modules/rimraf/bin.js ./.macroui && node node_modules/nps-utils/node_modules/rimraf/bin.js ./.express && node node_modules/nps-utils/node_modules/rimraf/bin.js ./.bootstrap && node node_modules/nps-utils/node_modules/rimraf/bin.js ./flow-coverage && node node_modules/nps-utils/node_modules/rimraf/bin.js ./codestandards
nps is executing `local.start` : node node_modules/concurrently/src/main.js --kill-others-on-fail --prefix-colors "bgBlue.bold,bgMagenta.bold,bgGreen.bold,bgBlack.bold" --prefix "[{name}]" --names "bootstrap,macroui,microui,express" 'node node_modules/mkdirp/bin/cmd.js .bootstrap && npx nps local.bootstrap' 'npx nps local.macroui' 'node node_modules/mkdirp/bin/cmd.js .microui && npx nps local.microui' 'npx nps local.express'
[macroui] nps is executing `local.macroui` : cross-env NODE_ENV=development ENV_ID=local npx webpack-dev-server --host 0.0.0.0 --config ./webpack.macro.dev.js
[express] nps is executing `local.express` : cross-env NODE_ENV=development ENV_ID=local BABEL_CONTEXT=server nodemon --watch srv --exec babel-node srv/boot.js
[microui] nps is executing `local.microui` : cross-env NODE_ENV=development ENV_ID=local BABEL_CONTEXT=client npx webpack -w --mode development --host 0.0.0.0 --config ./webpack.micro.dev.js
[bootstrap] nps is executing `local.bootstrap` : cross-env BABEL_CONTEXT=client npx webpack -w --mode production --host 0.0.0.0 --config ./webpack.bootstrap.dist.js
[express] [nodemon] 2.0.15
[express] [nodemon] to restart at any time, enter `rs`
[express] [nodemon] watching path(s): srv/**/*
[express] [nodemon] watching extensions: js,mjs,json
[express] [nodemon] starting `babel-node srv/boot.js`
[bootstrap] 
[bootstrap] webpack is watching the files...
[bootstrap] 
[bootstrap] (node:42795) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
[bootstrap] (Use `node --trace-deprecation ...` to show where the warning was created)
[microui] 
[microui] webpack is watching the files...
[microui] 
[microui] (node:42794) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
[microui] (Use `node --trace-deprecation ...` to show where the warning was created)
[macroui] ℹ 「wds」: Project is running at http://0.0.0.0:9000/
[macroui] ℹ 「wds」: webpack output is served from /
[macroui] ℹ 「wds」: Content not from webpack is served from /Users/Brooke.smith/dev/soar-checkout-micro-ui/.macro
[macroui] ℹ 「wds」: 404s will fallback to /index.html
[bootstrap] 
[bootstrap] WebpackCleanupPlugin: 0 file(s) deleted.
[bootstrap] Hash: a8a3f7050e2d773c71e1
[bootstrap] Version: webpack 4.46.0
[bootstrap] Time: 5119ms
[bootstrap] Built at: 05/03/2022 2:22:23 PM
[bootstrap]                    Asset     Size  Chunks                   Chunk Names
[bootstrap]             bootstrap.js  164 KiB       0  [emitted]        main
[bootstrap] bootstrap.js.LICENSE.txt  105 KiB          [emitted]        
[bootstrap]         bootstrap.js.map  863 KiB       0  [emitted] [dev]  main
[bootstrap] Entrypoint main = bootstrap.js bootstrap.js.map
[bootstrap] [194] (webpack)/buildin/global.js 472 bytes {0} [built]
[bootstrap] [449] ./bootstrap/bootstrap.js + 3 modules 3.17 KiB {0} [built]
[bootstrap]       | ./bootstrap/bootstrap.js 2.37 KiB [built]
[bootstrap]       | ./bootstrap/doLoadScript.js 468 bytes [built]
[bootstrap]       | ./bootstrap/getMicroUILoadedEvent.js 173 bytes [built]
[bootstrap]       | ./bootstrap/getMicroUIErrorEvent.js 169 bytes [built]
[bootstrap]     + 448 hidden modules
[express] {"level":"info","message":"Express Starting","timestamp":"2022-05-03T04:22:25.838Z"}
[express] {"level":"info","message":"Express Started","timestamp":"2022-05-03T04:22:25.853Z"}
[express] {"level":"info","message":"Express is listening on port 3000","timestamp":"2022-05-03T04:22:25.853Z"}
[microui] 
[microui] WebpackCleanupPlugin: 0 file(s) deleted.
[microui] Hash: 1e8fd1fc153e9abcb035
[microui] Version: webpack 4.46.0
[microui] Time: 34892ms
[microui] Built at: 05/03/2022 2:22:53 PM
[microui]                                   Asset       Size  Chunks                         Chunk Names
[microui]                           manifest.json  280 bytes          [emitted]              
[microui]        micro-ui.1e8fd1fc153e9abcb035.js     18 MiB    main  [emitted] [immutable]  main
[microui]     micro-ui.1e8fd1fc153e9abcb035.js.gz   1.86 MiB          [emitted]              
[microui]    micro-ui.1e8fd1fc153e9abcb035.js.map   11.2 MiB    main  [emitted] [dev]        main
[microui] micro-ui.1e8fd1fc153e9abcb035.js.map.gz   1.75 MiB          [emitted]              
[microui] Entrypoint main = micro-ui.1e8fd1fc153e9abcb035.js micro-ui.1e8fd1fc153e9abcb035.js.map
[microui] [./src/api/index.js] 355 bytes {main} [built]
[microui] [./src/context/Features/Types/Features.js] 0 bytes {main} [built]
[microui] [./src/context/index.js] 597 bytes {main} [built]
[microui] [./src/helpers/formatAdyenFinaliseAmount.ts] 1.92 KiB {main} [built]
[microui] [./src/helpers/formatCurrency.ts] 1.96 KiB {main} [built]
[microui] [./src/helpers/getAndroidStoreUrl.js] 359 bytes {main} [built]
[microui] [./src/helpers/getDollarValueFromCommBankPoints.ts] 405 bytes {main} [built]
[microui] [./src/helpers/getFeatures.js] 356 bytes {main} [built]
[microui] [./src/helpers/getFormattedCurrency.ts] 797 bytes {main} [built]
[microui] [./src/helpers/getPersistData.js] 1.42 KiB {main} [built]
[microui] [./src/helpers/getPriceChanged.js] 1.95 KiB {main} [built]
[microui] [./src/helpers/index.js] 499 bytes {main} [built]
[microui] [./src/index.js] 765 bytes {main} [built]
[microui] [./src/state/index.js] 113 bytes {main} [built]
[microui] [./src/stateful.js] 246 bytes {main} [built]
[microui]     + 7655 hidden modules
[macroui] ℹ 「wdm」: Hash: dbd6228a2a7d231728ea
[macroui] Version: webpack 4.46.0
[macroui] Time: 37515ms
[macroui] Built at: 05/03/2022 2:22:57 PM
[macroui]                                Asset       Size  Chunks                         Chunk Names
[macroui]                           index.html  564 bytes          [emitted]              
[macroui]     macro-ui.dbd6228a2a7d231728ea.js   16.1 MiB    main  [emitted] [immutable]  main
[macroui] macro-ui.dbd6228a2a7d231728ea.js.map   9.88 MiB    main  [emitted] [dev]        main
[macroui]                        manifest.json  141 bytes          [emitted]              
[macroui] Entrypoint main = macro-ui.dbd6228a2a7d231728ea.js macro-ui.dbd6228a2a7d231728ea.js.map
[macroui] [0] multi (webpack)-dev-server/client?http://0.0.0.0:9000 ./dev/index.js 40 bytes {main} [built]
[macroui] [./dev/components/index.js] 131 bytes {main} [built]
[macroui] [./dev/index.js] 511 bytes {main} [built]
[macroui] [./dev/screens/index.js] 95 bytes {main} [built]
[macroui] [./dev/theme.js] 5.14 KiB {main} [built]
[macroui] [./node_modules/@material-ui/core/esm/index.js] 10.5 KiB {main} [built]
[macroui] [./node_modules/core-js/stable/index.js] 10.1 KiB {main} [built]
[macroui] [./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[macroui] [./node_modules/react/index.js] 190 bytes {main} [built]
[macroui] [./node_modules/regenerator-runtime/runtime.js] 24.3 KiB {main} [built]
[macroui] [./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:9000] (webpack)-dev-server/client?http://0.0.0.0:9000 4.29 KiB {main} [built]
[macroui] [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.52 KiB {main} [built]
[macroui] [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[macroui] [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[macroui] [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[macroui]     + 7172 hidden modules
[macroui] Child HtmlWebpackCompiler:
[macroui]      1 asset
[macroui]     Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[macroui]     [./node_modules/html-webpack-plugin/lib/loader.js!./dev/index.html] 715 bytes {HtmlWebpackPlugin_0} [built]
[macroui]     [./node_modules/lodash/lodash.js] 531 KiB {HtmlWebpackPlugin_0} [built]
[macroui]     [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {HtmlWebpackPlugin_0} [built]
[macroui]     [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {HtmlWebpackPlugin_0} [built]
[macroui] ℹ 「wdm」: Compiled successfully.

 

Here it what the debug console looks like:

> soar-checkout-micro-ui@0.1.0 start /Users/Brooke.smith/dev/soar-checkout-micro-ui
> npx nps local
get-logger.js:46nps is executing `local` : cp -n .env.local.dist .env.local || true && npx nps clean && npx nps local.start
get-logger.js:46nps is executing `clean` : node node_modules/nps-utils/node_modules/rimraf/bin.js ./.microui && node node_modules/nps-utils/node_modules/rimraf/bin.js ./.macroui && node node_modules/nps-utils/node_modules/rimraf/bin.js ./.express && node node_modules/nps-utils/node_modules/rimraf/bin.js ./.bootstrap && node node_modules/nps-utils/node_modules/rimraf/bin.js ./flow-coverage && node node_modules/nps-utils/node_modules/rimraf/bin.js ./codestandards
get-logger.js:46nps is executing `local.start` : node node_modules/concurrently/src/main.js --kill-others-on-fail --prefix-colors "bgBlue.bold,bgMagenta.bold,bgGreen.bold,bgBlack.bold" --prefix "[{name}]" --names "bootstrap,macroui,microui,express" 'node node_modules/mkdirp/bin/cmd.js .bootstrap && npx nps local.bootstrap' 'npx nps local.macroui' 'node node_modules/mkdirp/bin/cmd.js .microui && npx nps local.microui' 'npx nps local.express'
get-logger.js:46nps is executing `local.macroui` : cross-env NODE_ENV=development ENV_ID=local npx webpack-dev-server --host 0.0.0.0 --config ./webpack.macro.dev.js
get-logger.js:46nps is executing `local.express` : cross-env NODE_ENV=development ENV_ID=local BABEL_CONTEXT=server nodemon --watch srv --exec babel-node srv/boot.js
get-logger.js:46nps is executing `local.microui` : cross-env NODE_ENV=development ENV_ID=local BABEL_CONTEXT=client npx webpack -w --mode development --host 0.0.0.0 --config ./webpack.micro.dev.js
get-logger.js:46nps is executing `local.bootstrap` : cross-env BABEL_CONTEXT=client npx webpack -w --mode production --host 0.0.0.0 --config ./webpack.bootstrap.dist.js
log.js:34[nodemon] 2.0.15
log.js:34[nodemon] to restart at any time, enter `rs`
log.js:34[nodemon] watching path(s): srv/**/*
log.js:34[nodemon] watching extensions: js,mjs,json
log.js:34[nodemon] starting `babel-node srv/boot.js`
cli.js:351 webpack is watching the files…
warning.js:45(node:43610) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead (Use `node --trace-deprecation ...` to show where the warning was created)
cli.js:351 webpack is watching the files…
warning.js:45(node:43606) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead (Use `node --trace-deprecation ...` to show where the warning was created)
PrefixFactory.js:55ℹ 「wds」: Project is running at http://0.0.0.0:9000/
PrefixFactory.js:55ℹ 「wds」: webpack output is served from /
PrefixFactory.js:55ℹ 「wds」: Content not from webpack is served from /Users/Brooke.smith/dev/soar-checkout-micro-ui/.macro
PrefixFactory.js:55ℹ 「wds」: 404s will fallback to /index.html
WebpackCleanupPlugin.js:34
WebpackCleanupPlugin: 0 file(s) deleted.

The `run` builds:

  • bootstrap
  • micro
  • macro
  • and starts express

 

The `debug` doesn't seem to build anything.  And the logger that is outputing '[macroui]' doesn't seem to be running correctly. 

0

Weird... My only guess is that your scripts use the NODE_OPTIONS environment variable somehow and, as the debugger uses NODE_OPTIONS environment variable for automatic connection to child processes, it gets overwritten causing the issue. Could you check if disabling  js.debugger.use.node.options key in Registry (in Help | Find action..., type registry... to locate it) makes any difference?

0

Yes Elena, great work, thanks!  That does seem to fix the issue. 

However NODE_OPTIONS is not set anywhere - not in the WebStorm RUN configuration, not in any scripts and nor in the environment.  I added

debug: 'echo NODE_OPTIONS: $NODE_OPTIONS',

to the package-scripts.js and it has no value.

I'm expecting that debugging will not work with this turned off.  Ideas?

----

Confirmed - break points don't work

I see the debugger starts with

/Users/Brooke.smith@flightcentre.com.au/.nvm/versions/node/v14.19.0/bin/npm --inspect-brk=65520 run start

Does `NODE_OPTIONS` get set to `-inspect-brk=65520`?

Jetbrains should get themself added to the list of debug clients in https://nodejs.org/en/docs/guides/debugging-getting-started/

0

>Confirmed - break points don't work

this is https://youtrack.jetbrains.com/issue/WEB-55805, please follow it for updates

>Does `NODE_OPTIONS` get set to `-inspect-brk=65520`?

yes, more or less - it's supposed to set it for all spawned child processes

But you only need debugging yoiur express app, don't you? seems the only thing I can suggest for now is re-defining your script, separating the stuff that has to be debugged from webpack, etc. processes

0

Hi Elena,

> only need for express app

Possibly.  I will have to look at it more closely.  I might take a while to get this done due to other priorities.

Thanks for your help so far.

Cheers,

Brooke

0

Please sign in to leave a comment.