How to Debug Next.js 13 and React in VS Code

hi guys this is umair back with another video in this short video I'm going to explain you how you can debug your front-end code in vs code so you can add the breakpoint and stop the execution of the program directly in vs code so you don't need to go to the browser at the breakpoints and print out the variable values in the console window of the browser okay so you can use this method in any front-end framework or a library like react next.js angular view or even the vanilla JavaScript all right so this is the next js13 application which I am actually creating the tutorials for but before moving further I just want to let you know that I have this new Channel programming with umair and I'm creating the videos on all the latest Technologies like the angular 16 next js13 nodexpress mongodb all the latest version and also the chat GPT for programmers and all the small projects that I'm building on this particular Channel and you can see that I've already created 82 videos on this particular channel it's just that request go check out my channel from the link in the description of this video and do subscribe my channel because I'm creating all the latest technology videos on this particular Channel programming with Omar but in this channel a voicemail I'll still be creating videos on the tech and tutorials mainly in Java so let's go ahead this is the next js13 application and uh this is one of the component which is the posts and I'm going to add the breakpoints in this ad post Handler and I'll stop the program over here I'll can add different breakpoints right here so first of all what we need to do is we need to let's first run the project npm run Dev and it's running currently I need to click on this fourth icon from the left if I click on it I need to click on this create a launch.json file and then I need to select uh this web app Chrome and it will create a new folder dot vs code and it will create a new file launch.json inside it this is the name of that configuration we can add as much configuration as we want in this array one for the front and one for the back end one for the full stack are as much as we want and now if I click again we want to see that window but if I click on the drop down it is showing this one configuration and if we add more configuration it will show all those configuration over here all right so first of all what we need to do is over next.js let me stop it actually uh what we need to do is our next.js project is running on localhost 3000 which I need to change over here I'll change the port to 3000 rest of things can remain same but I can still change the name of it I'll leave it like this and now I will click on any of the breakpoint over here and I will be running my project now in the terminal npm run Dev and once it's compiled I can actually select a particular configuration which is already selected and then I can click on this green play button if I click on it you will see that it will open up a new window in which it will be running the app of our crud app in next.js13 and now if I add a new post this function is going to get triggered handle at post and it should be stopping over here so if I add a new post add new post and yes this has been stopped and I can hover over different title and the description these are the values coming from the browser and on the left side you can see that currently the new post variable is undefined this is undefined so let's move to the next breakpoint I've added a new breakpoint I can use these icons I can click on it and now new post should be available on the left side and now you can see that all the values coming in from that browser are showing over here directly okay now another thing I want to tell you know that uh debug console this is just like the console window of the browser and inside it I can actually write an algorithm for based upon my requirements so I can write a equals to 2 I can Define variables and I can also print out the current variables which are a part of my file which is in the scope of this function currently new post is in the scope title is in the scope description is in the scope so I can have all those values of the variables directly over here all right so this is how we can add the configurations we can add the same kind of configurations for the backend applications and if you want to know about the how to debug your backend applications or even the server components in Nexus 13 I have created a video on my new channel uh do subscribe my channel again guys and watch the latest technology videos on that thank you so much for watching I'll be creating more videos on this channel as well so see you for the next videos thank you

Channel: Awais Mirza

Views: 11,713

Keywords: vscode debugging, debug angular in vscode, debug react in vscode, debug javascript vscode, debug node in vscode, debugging tutorial, how to debug web app, what is debugging, how to add breakpoints in vscode, how to debug angular in vscode, learning react, learning angular, learning javascript

Id: bqk3Rnsr5gU

Length: 5min 7sec (307 seconds)

Published: Thu Aug 03 2023