Next.js - Is it possible to debug getServerSideProps?

Question

Hi as per docs getServerSideProps is a function which is executed only on server side.

export async function getServerSideProps(context) {
  console.log("hello world");
  debugger;
  return {
    props: {
      age:55
    }, // will be passed to the page component as props
  }
}

As a consequence simply dropping a debugger keyword won't work.

I have tried:

• Attaching the node.js debugger on port 9229
• Running node --inspect-brk ./node_modules/next/dist/bin/next
• Running cross-env NODE_OPTIONS='--inspect' next dev

But neither console.log() nor debugger keyword seem to have any effect.

However my props from getServerSideProps are passed in correctly, which proves the function is called.

Is it possible to stepthrough getServerSideProps or at least get console.log working? Thanks!

P.S.

The lines of code outside getServerSideProps are debuggable and work as expected.

Answer 1

In order to make the open the debug port open properly, you need to do the following:

// package.json scripts
"dev": "NODE_OPTIONS='--inspect' next dev"
// if you want custom debug port on a custom server
"dev": "NODE_OPTIONS='--inspect=5009' node server.js",

Once the debug port is own, you should be able to use inspector clients of your choice.

Answer 2

I had the same problem and I solved it with following steps. First, I installed cross-envpackage with

npm install cross-env

then I had to adjust my package.json with

"dev": "cross-env NODE_OPTIONS='--inspect' next dev",

After that you should be able to run npm run dev. Open localhost:3000 or whatever port u are normally running nextjs app on. Open new tab and type

 chrome://inspect

You should be able to see path to your app with word inspect at the end. After clicking new devTools will be opened with ability to set up breakpoints inside e.g. getStaticPaths, getStaticProps or getServerSideProps.