How does one debug NextJS React apps with WebStorm?

Question

I'm trying to use the WebStorm IDE debugger to debug a NextJS React app. I tried to use a JavaScript configuration, but that didn't seem to work -- neither when I used a Node config.

What's the correct procedure for debugging NextJS React apps with WebStorm?

Phaih

Answer 1

The following steps work for me:

• start the app with next (npm run dev or whatever your start script looks like)
• add breakpoints, create JavaScript Debug run configuration, specify http://localhost:3000 URL
• debug

If you like to debug the code that is executed on the server side, I'd suggest using the Node.js run configuration with node_modules\next\dist\bin\next specified as Javascript file:

You can then debug both Node.js and Javascript Debug run configurations to get both server-side and client-side code debugged.

Contractile

Thanks, that seems to work with simple projects, but in the project I'm working on the "pages" directory is not in the project root, but some levels down, '/src/common/pages' and when I launch the debugger I get the error "Debugger attached. > Couldn't find a pages directory. Please create one under the project root". I am trying at the moment to debug a node module at the moment, so I don't want to set the project root to the 'common' directory... – Phaih

In my case, there was no .next/dist/bin/next file, regardless of production or dev deploy. Clicking the debug mode on package.json's next script seemed to work for the server side debug. – Clywd

I confirmed that next command in package.json scripts just starts debugging with Node 12.14.1, while v13.3.0 couldn't connect the debugger. – Bedford

I can confirm that this works on NextJs version 14.1.0. Thanks for help! – Strongarm

Answer 2

I found that clicking the play button next to dev in package.json and selecting the debug option worked for debugging my API served by Next.js.

This automatically creates the run configuration. Breakpoints are flakey though, I think because I'm using TypeScript. I need to edit the file after adding the breakpoint for them to work.

Kinship

It doesn't stop at the breakpoints me even if I edit the file. Although I am using PyCharm pro version, not WebStorm. – Flexed

same for me using WebStorm, some of the breakpoints seems to be working, but not all of them. – Misshape

If only some of your breakpoints are working, it could be that you're only capturing server-side or client-side breakpoints. Remember NextJS can run the same code server-side (SSR) or client-side – Bellyband

@Bellyband Works for me on the server but don't detect breakpoints in Browser! how can fix it? – Expand

I think we have to add the breakpoint on the generated .js file... it seems to work there... – Menell

Is this documented by JetBrains? I spent a good deal of time poring over their docs and there's no mention of this here: jetbrains.com/help/pycharm/… Granted, that's for PyCharm, but I believe the feature sets and docs are similar if not identical – Hysterectomize

Answer 3

for the Frontend of next.js:

Start debugging your app right from the Run tool window below ↓. Just hold Ctrl+Shift / ⌘⇧ and click the URL address where the application is running. WebStorm launches the auto generated Debug Application run/debug configuration, the browser opens at http://localhost:3000/, and the Debug tool window appears showing you the call stack and variables.

https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/#launch_a_debugging_session

Bidwell

he say Next js You say Create React App?!! do not useful for Next js. – Expand

@MohmmadEbrahimiAval No, I'm actually demonstrating how to do this in a NEXT.JS app. and since it's identical to react I also provided further instructions... – Bidwell

This is the only thing that worked for me. – Demogorgon

Answer 4

I tried using both WebStorm and Rider, and in both of these IDEs, breakpoints randomly stop being hit after some time.

As a workaround, I just stop and rerun the process, which makes breakpoints hit again.

If there is a better way to cope with this weird problem, I'd love to hear it in the comments.

Zeb

Answer 5

For the front end, try adding a "Launch Web Browser" action to your dev configuration's "Before Launch" list, and enable Javascript debugger:

and then click the debug icon, here:

This is the only way I've managed to get it working.

Master