How does one debug KeystoneJS apps in WebStorm?

This is a post similar to my post concerning debugging Strapi apps -- https://intellij-support.jetbrains.com/hc/en-us/community/posts/360007612720-Debugging-Strapi-custom-controllers-breakpoints-not-hit .

I want to debug a KeystoneJS app. 

The `package.json` command to start the dev version is

"dev": "cross-env NODE_ENV=development DISABLE_LOGGING=true keystone dev",

 

I can't find what file keystone is calling in order to be able to set up a debug config similar to Strapi above.

 

15 comments
Comment actions Permalink

This one should work, I believe:

 

Note the Browser/Live Edit tab - enabling both checkboxes allows launching the browser with your app URL and debugging the front-end static code (located in the public folder) as well:

 

0
Comment actions Permalink

Thanks.  Is there any way to debug KeystoneJS -- server and client, as per above -- when using Keystone's built-in NextJS app (https://www.keystonejs.com/keystonejs/app-next/).  How would I set up the server config for that?  I tried using the one above but it didn't work for me.

Specifically, WS stops at "breakpoints" I never set inside the node modules of Keystone, but does not stop at breakpoints inside the NextJS/React front-end code (their 'debug dots' remain red)

 

0
Comment actions Permalink

could you share a project I can play with?

0
Comment actions Permalink

Thanks.  I can't share what I'm working on but I'll try to mock up a sample project and pass it on. 

1
Comment actions Permalink

@ElenaPogorelova

Here is a simple KeystoneJS/NextJS app I've mocked up from the sample KeystoneJS 'todo app'.

https://github.com/pulpopurpura/keystone-next-todo

You'll need to have MongoDB installed and running.

then `yarn` to install npm packages

then `yarn dev` to start the app

then `localhost:3000' will take you to the admin panel, where you can add 'todos'

and finally 'localhost:3000/todos' will show you the (minimal) front end.

Thanks for your help!

0
Comment actions Permalink

Thank you!

Looks as if all the stuff is executed on the server end, so actually a single Node.js run configuration should do the job

 

0
Comment actions Permalink

Thanks -- I'll try it as soon as I can.

But one thing -- the NextJS code is also executed on the client, that is, there's a first server render that's passed to the browser but then the React app loads there.

0
Comment actions Permalink

Yes - but I can't get the breakpoints hit on the client end, even in Chrome Dev Tools.

The only way to make (some of them) work in WebStorm is enabling Ensure breakpoints are detected when loading scripts option - they will be hit on page loading then

 

0
Comment actions Permalink

Thanks.  I've followed your instructions but don't see the checkbox 'ensure breakpoints are detected when loading scripts".  Just to be clear, this is a NodeJS configuration we're setting up, right?

 

 

0
Comment actions Permalink

this option is available in Javascript Debug run configuration - see screenshots in my comments above. Node.js configuration is supposed to be used for server-side debugging, the frontend code that is run in browser has to be debugged using Javascript Debug run configuration

 

Clear the After launch checkbox in your Node.js configuration  and use Javascript Debug  to debug the Next.js code

0
Comment actions Permalink

Ah, of course.  So one  would run both of them at the same time, the two debug configs?

0
Comment actions Permalink

Yes - first start the server with Node.js configuration, then use Javascript Debug  to debug the Next.js code

0
Comment actions Permalink

EDIT:  This could be to recent changes in Keystone -- see https://github.com/keystonejs/keystone/issues/2676.  Any suggestions welcome though.


Hi -- I'm trying to implement your suggestions above for a Keystone project that doesn't involve a front-end, just the NodeJS back.  It's written in TypeScript -- I have the current debug config, as per your suggestions above:

with nothing under "Browser/Live Edit".

When I run it I get 

```

/Users/ranthony/.nvm/versions/node/v12.14.0/bin/node /Users/ranthony/Documents/projects/yaa-cms/node_modules/@keystonejs/keystone/bin/cli.js dev
Debugger listening on ws://127.0.0.1:57962/6784997d-5f53-4000-bf21-311cf38412b3
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
- Initialising Keystone CLI
ℹ Command: keystone dev
-
✖ Validating project entry file
Error: --entry=index.js was passed to keystone, but 'index.js' couldn't be found in /Users/ranthony/Documents/projects/yaa-cms.
Ensure you're running keystone from within the root directory of the project.
at getEntryFileFullPath (/Users/ranthony/Documents/projects/yaa-cms/node_modules/@keystonejs/keystone/bin/utils.js:25:7)
at Object.exec (/Users/ranthony/Documents/projects/yaa-cms/node_modules/@keystonejs/keystone/bin/commands/dev.js:23:29)
at Object.exec (/Users/ranthony/Documents/projects/yaa-cms/node_modules/@keystonejs/keystone/bin/command-runner.js:47:30)
at Object.<anonymous> (/Users/ranthony/Documents/projects/yaa-cms/node_modules/@keystonejs/keystone/bin/cli.js:65:4)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
at internal/main/run_main_module.js:17:11
Waiting for the debugger to disconnect...

Process finished with exit code 139 (interrupted by signal 11: SIGSEGV)
```

A related question: do I need to set up a pre-run task to compile the TS to JS?  I tried adding 'compile TypeScript' as a pre-run task, but it gave me the same error as above.

My `tsconfig.json` is

```

{
"compilerOptions": {
"target": "ES6",
"lib": [
"esnext",
"dom"
],
"skipLibCheck": true,
"outDir": "tsout",
"strict": false,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"module": "commonjs",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"sourceMap": true,
"alwaysStrict": true,
"jsx": "react"
},
"exclude": [
"node_modules"
]
}

```




0
Comment actions Permalink

No ideas, sorry:( Doesn't seem to have any relation to debugging/WebStorm, seems to be a keytstone issue

0
Comment actions Permalink

The solution was to add `--entry=tsout/index.js` to the application parameters in the debug config:

1

Please sign in to leave a comment.