Debugging next.js apps

[arrowplum]

With the way javascript is loaded, it looks like you can't use a debugger on your own code. At least not the developer tools debugger.

I haven't seen any other mention of this issue so is there something I am missing, or is next.js not intended for larger projects?

[erictherobot]

I'm not sure if this is helpful, but I have been building a rather larger project with NEXT and have had no issues with using this https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en for debugging. You can access everything including components, props, state, etc. Good luck!

[rauchg]

@arrowplum like @erictherobot says, the React Dev Tools should work out of the box. What other tools were you looking to integrate?

[dbo]

What about cmd+O to open your component code to place breakpoints?

[dbo]

I think this would require source maps being emitted by webpack, thus depend on PR #222. IMO source maps should be a default for next dev.

[lachlanjc]

@rauchg Yep, the React Dev Tools work fine for me, but I'd like to use native JavaScript debugger. I've got some code that runs before my React component renders (not modifying props/state) and it'd be great if I could stop the code in there and use the regular browser Dev Tools.

[nkzawa]

I could use debugger on Chrome like

render () {
  debugger
  return <div>hi</div>
}

[dbo]

@nkzawa I can't open any of my modules in Chrome devtools (cmd+O) without tweaking the webpack config to emit source maps (devtool: 'eval').

[eezing]

Can this be addressed with a source maps change in webpack? I myself would be very happy to have this.

[dbo]

As far as I see this gets addressed either via PR #279 or you can tweak it when PR #222 has landed.

[nkzawa]

Source map has been supported now.

[arrowplum]

@nkzawa is that PR #279 ?