0

I have a visual studio solution that has several diffrent project types.

One of the projects is a NextJs App, to run the app I navigate to the directory and do the usual "npm run dev" command. That starts the app on localhost:3000.

The app runs no problem, but how do I get visual studio to stop on break points as my nextJs all runs?

I have tried to attach visual studio to the node.exe process, but visual studio still does not stop at the breakpoints.

Ayo Adesina
  • 2,231
  • 3
  • 37
  • 71
  • So all projects were created by VS, am I right? Actually I think for REACTJS project debugging ,VS code would be a better choice. Or use other way like browser dev tools or workarounds shared here https://stackoverflow.com/questions/58733134/how-to-debug-a-react-app-in-visual-studio-2019-using-the-blank-node-js-templat and https://stackoverflow.com/questions/59994687/debugging-react-app-in-visual-studio-2019-does-not-work – Jack Zhai Jan 10 '23 at 10:14

1 Answers1

0

I can reproduce your situation.

AFAIK, NextJS is a tech based on ReactJS. So in this answer I will talk about how to debug a common React App. Debug pure React App in VS2022 is a new feature, and it requires you to install the Node.js development workload in Visual Studio Installer:

enter image description here

This will make sure your VS2022 be able to debug or run the React App(I notice you still trying to using command to run the react app, after install this, you will be able to run/debug the React App directly in VS2022).

After import your React App, right click your React App and select Debug->Start New Instance:

enter image description here

(About how to import and configure React App in VS2022, see here)

Another thing you need to notice is, the default port of React App is 3000, that means if you don't do any changes, all of the react App will start on port 3000. This will make your VS2022 unable to debug the React App in this situation:

For example, if you have a React App instance already started on port 3000 or even any other app started on port 3000, VS2022 will not run any code in your Visual Studio React App, no Break Point will hit, it will directly navigate to 'http://localhost:3000/'.

So make sure you have install the Node.js development workload, make sure the port of your Visual Studio React App was not been occupied.

I am able to debug the React App via VS2022 on my side:

enter image description here

For more information, please refer to this official document:

https://learn.microsoft.com/en-us/visualstudio/javascript/debug-nodejs?view=vs-2022

Bowman Zhu-MSFT
  • 4,776
  • 1
  • 9
  • 10