April 5, 2020 update: This article is now part of the Next.js documentation: https://nextjs.org/docs/advanced-features/debugging
👋 Hi there, th...
For further actions, you may consider blocking this person and/or reporting abuse
It just doesn't work :(.
On a Mac OS, with create-next-app in version 9.1.1.
npx create-next-app
"scripts": {
"dev": "NODE_OPTIONS='--inspect' next",
I run
yarn dev
and terminal displays:$ NODE_OPTIONS='--inspect' next
Starting inspector on 127.0.0.1:9229 failed: address already in use
Hey there, there's currently a bug in Next.js about this, I opened a PR here: github.com/zeit/next.js/pull/11041
I updated the blog post too.
But in Next.js 9.1.1 it should have been working weirdly. Are you starting different Node.js processes from Next.js? Or maybe you have a Next.js plugin that is doing so. Let me know!
Thanks for the quick answer.
This is the package.json after npx create-next-app:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "NODE_OPTIONS='--inspect' next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "9.3.1",
"react": "16.13.1",
"react-dom": "16.13.1"
}
}
Everything seems up to date, yet :
yarn dev
yarn run v1.22.0
$ NODE_OPTIONS='--inspect' next dev
Debugger listening on ws://127.0.0.1:9229/dc491c88-ca40-47d2-8568-26ea554a4ae4
For help, see: https://nodejs.org/en/docs/inspector
[ wait ] starting the development server ...
[ info ] waiting on http://localhost:3000 ...
Starting inspector on 127.0.0.1:9229 failed: address already in use
Starting inspector on 127.0.0.1:9229 failed: address already in use
Starting inspector on 127.0.0.1:9229 failed: address already in use
And when I inspect for the port 9229, nothing is bound to.
lsof -nP -iTCP:9229 | grep LISTEN
-> no lineHey there, can you try with next@9.2? I know this version was working because I used the debugging on it.
Good guess! It works with Next 9.2.0 and not in 9.3.1...
I will wait for your PR to be merged so, because I don't want to downgrade the version for this only debug need.
Thanks for your help!
I followed it exactly but could not get it to work.
Shows Debugger attached, but when I add breakpoints, it stops at other code places which is not my code and stepping through just goes past where I wanted it to stop.
If I enter
debugger;
statements they are simply ignored. it never stops on those.I am on nextjs 9.4.0 with node 13.13.0 and latest VSCode on Ubuntu 18.04
Did you manage to solve the issue. Have exactly the same problem.
no I did not.
Hey, thanks for the post!
It works well with Next front-end, but setting breakpoints in VS Code for APIs does not work - VS Code complains "Breakpoint set but not yet bound". Setting
debugger
does work though.Do you know why and how to make IDE breakpoints work?
Hmm it's weird, following the exact same guide I do have breakpoints in API routes working well. So really don't know what to tell you.. Try to create a simple repository and see if you're having the same issue, share it with me and I will also test it.
Thanks 🙏
Hey, Great article.
But I don't think it is working as of now.
I am still getting
Hi there, thanks for making this guide :)
I'm stuck at step three with the following error in console
'NODE_OPTIONS' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
I solved following the steps on this post stackoverflow.com/questions/539485... and replacing the dev config with this one: "dev": "cross-env NODE_OPTIONS='--inspect' next",
My problem is, debugger doesn't seem to work. I used the same breakpoints, the same 'test' variable as in the video example, but I get nothing on my debugger tabs (variables, watch, etc.) when I run it
I'm constantly having this issue with debugging Next.js API routes. Often I can't place breakpoints in vscode, or if I do it breaks at some totally random spot (sometimes it will open the correct transpiled file and then I can just move the breakpoint to where it should be).
The only chance I have is to stop my server, restart vscode, blow away the the .next directory, and restart. But as soon as I change some code, I have to do it all over again.
I feel like there must be some trick to it, otherwise, I feel like i'd see more complaints about it.
My Two cents:
NextJS under the hood is ReactJS so I tried adding launch.json of react from VSCode
Now run NextJS as "dev": "next dev" - no change
npm run dev
Press F5 to attch the process and it should work now.
Vscode always stop at the first line, no matter what you configure it to.
It ignores the
skipFiles
,stopOnEntry
, etc.Any idea why?
I don't know the exact difference, but for those of you who get
address already in use
issue,try
Hi there, which command were you using previously when getting "address already in use"? The blog post and documentation warns about this so I thought it would be good. The error comes from the fact that NODE_OPTIONS is sent to all child node processes so when running NODE_OPTIONS=.. yarn dev you're asking yarn to start in debugger mode and also nextjs, on the same port, which causes this error.
Also, you should be able to safely remove node_modules/.bin/ because that's already the default when running npm scripts.
Hey, embarrassingly, I do not remember which command I was using yesterday. (It was literally yesterday, though)
anyway you're saying
These two commands are equivalent?
I didn't know. Thank you!
I do not know if both of those commands are equivalent, what I know is that:
and
are equivalent, because of: docs.npmjs.com/misc/scripts#path
What I wanted to say is that:
running
will fail because this starts two processes in debugger mode: yarn and nextjs. This is why you get the error message about already running debugging server.
NODE_OPTIONS can only be passed right next to the next command inside package.json.
It looks like the problem with NODE_OPTIONS has been fixed, I'm not getting the
Starting inspector on 127.0.0.1:9229 failed: address already in use
error anymore. 🙂 However, I can't seem to get the clientside debugging working. I installed theDebugger for Chrome
extension in VS Code, but I think that I miss a certainlaunch.json
attach configuration? Excellent tutorial, thank you!Yes you do need a launch.json configuration, and I don't think you need a particular extension on VSCode, just the regular current installation.
The launch.json configuration is inside the blog post, did you use it?
You can also first try the Google Chrome debugging method also highlighted in this blog post which requires less configuration.
Another potential pitfall (I hit them all, and seems that I finally got it working somehow)
If chrome debugging doesn't work in VSCode, you may need a different type of source map, alter your next.config.js
module.exports = {
webpack(config) {
config.devtool = 'cheap-module-eval-source-map';
return config;
}
};
spectrum.chat/next-js/general/debu...
Bonjour Vincent,
Excellent tutorial, thank you.
Could you write one that explains how to do the same with Webstorm instead of VS Code?
Similar to how Webstorm lets you debug React apps:
blog.jetbrains.com/webstorm/2017/0...
Thank you :)
I figured it out,
Change your next dev script to the following (same as you mentioned in your tutorial)
"scripts": {
"dev": "NODE_OPTIONS='--inspect' next",
}
Create a JS Debug config (see blog.jetbrains.com/webstorm/2017/0...)
Remember to update Google Chrome! I didn't do this and it's what messed me up.
IF someone else struggling with this: if your next project is in subfolder in your vscode workspace, you should use sourceMapPathOverrides
stackoverflow.com/a/61013488/1793469
Nice, adding this to the post, thanks!
NODE_OPTIONS='--inspect' next
, is not working.try this:
"dev": "node --inspect ./node_modules/next/dist/bin/next"
,But debugger is not working anyway.
This is not working with next 9.3
debugger in source code will fire in dev tools, and not in vscode. the breakpoints in vscode is greyd out, says 'brakepoint set but not yet bound"
Hey there, I am using the latest VScode, latest Next.js and everything is working fine. I can either debug in Chrome dev tools or in VScode, using debugger; keyword or breakpoints by click in VScode
⚠️ You either activate the Dev tools debugger (Google Chrome) OR the one in VScode, but not both at the same time. As soon as you activate the one in Chrome, then it will disable it in VSCode.
I commented on the PR with screenshots of it working in VSCode: github.com/zeit/next.js/pull/10807...