Debug Next.js 14+ in VS Code - Debug Server Components with Breakpoints

hi guys welcome to this video on next GS 13.4 in this video I'm gonna show you how we can debug our next JS project in vs code directly we don't need to go to our browser console window or the source window and add the debuggers to actually check and verify and debug our code written in next.js so in next.js we have a client components and the server component so I'll be showing you how we can add debuggers on both the client and the server components and same Concepts you can use in old version of next yes because in old versions We had get server side props get static props and in those function the code written in those functions were the server side code so the client side implementation and the technique that I am going to use in this video you can use the same technique for other Technologies as well like the react angular view JavaScript to debug your application directly in vs code okay so first of all before I start adding debuggers and showing you how we can set up our vs code for debugging I just want to show you one quick extension which is very good and this is called the console ninja what it does is wherever we have added the console.log statements on the client-side components like this you can see it is a client component and this extension will actually output whatever we want to Output directly in this editor we don't need to go to our browser console window to see the output of this console log statements okay so this is the current app which is already running and if I show you how it's working this is an xjs project built in next 13 okay if I show you its version this is the version of next which I am running so if I show you the browser and refresh and this is the crud application at the top it has a form and Below there are the list of posts visible and we can add a new post and add the description and we can delete and edit the post so let's say that we have this extension enabled which is console ninja and we have this console log statement added over here which is inside the edit post function okay so let's try to edit one of that so let's try to edit this and I'm going to edit the post and now let's go over here here you can see that it is directly outputting what is coming in these variables updated ID and the updated posts okay so how cool is that you don't need to go to the browser this is a very well way to debug your code and quite useful okay now let's come to the main point and I'm gonna show you how we can add the debugger in our vs code to stop our application uh in the client component as well as server component so first of all what you need to do is go over here and you can see that this is the folder structure of us we need to click on first of all let's stop the project I'm going to click on this icon on the left bar and I'm going to create a launch.json file I'm going to click on that and here I need to select browser web app browser since we are building a web app which will be running on the Chrome so I'll be selecting it so if we by default create this launch.json file within this folder called dot vs code okay and here I need to make sure that the name we can modify the name that will be visible over here this one and we can add multiple objects over here for multiple configurations we can have a configuration for Chrome we can have a configuration for Mozilla Firefox and we can change the name and also we need to give the localhost URL since our next yes app runs on 3000 ports so I'm going to update it let's save this file and let's close it so currently if I go and click on the run and debug icon I will see this drop down and in this drop down I will see at the top that launch Chrome against localhost and this is the name of that configuration which I just added and we can modify this name and we can add multiple objects and all those configuration objects will be visible over here okay so first of all let's see that this is a client component and this is the post context and let me add few breakpoints over here delete post edit post add post and let me run the project now so our project is running and now we need to click on this green icon display button at the top make sure you have selected a particular configuration that we have added in our file here launch.json now if I click on this green button it will open up a new window on the browser and it will start running the project with the debugger attached in it so now you can see that here we have this form and this is the list of the posts and here you can see that it is actually navigated us to the debug console so first of all let me stop our execution cycle in any of these functions let me try to add a new post over here and let's see if it stops on this function or not so I'm going to add a new post over here let's add and now you can see that it has stopped on ADD post function and if I hover on new post it will show me all the data which is coming from the other component being which is using this function okay so I can see the updated data it is quite helpful we don't need to go to the Chrome browser window to actually test the output and currently we have this new post variable available in this window debug console and here we can also output this over here and this is just the JavaScript window just like the console window on the Chrome browser and we can add anything to this new post let's say we want to add new post and we want to add a new property to this object and we can also do this over here so if I hit enter new post you can see that it is actually showing the new property which I've just added now so it's just the JavaScript we can manipulate the data which is coming from it will not actually affect the actual data which is coming in that function it is just for us debugging uh manipulate the data build the formulas write JavaScript and then append the code over here and this helps in debugging so this is how we can test our client-side components in next js13 and let's go ahead and try to test the server components in which we don't write this line and this component becomes the server component so let's go ahead how to add breakpoints and stop the execution of our program on the functions on the lines which are server side components so this is the new next year's 13 project because in the previous project I did not have any server components so this project have two routes one is the main route other is the portfolio route and you can see that I have not returned used client at the top so it is just loading this constant data on the page so if I show you how it's looking like it's just implementation of theming in next year 13. I've already created a video on how to implement theme in my channel go check out if you want to learn that so this is the Home Route and it is a client component but if we go to the portfolio route this portfolio route is a server component all right so now let's go ahead and we need to go to the page and you can see that this is a client component we have already tested it now let's try to add a debugger over here in these two lines and try to stop our execution of program over here first of all we need to add that file so I'll go over here and I will be creating a new launch dot Json file so I'll create that and I will click on the web app Chrome and it will be created but I don't want to add this information over here so next.js documentation actually gives us this file so if we go to the next yes documentation for the pages if uh if we copy it for the pages it will still work in the app directory structure as well in latest next yes version so I'll just copy this code which is the lot.json file so I will just copy and paste that whole code which is I've just copied so I'll just save it and you can see that we will now see these three things debug server side debug client side debug full stack so I've added these two breakpoints on these two lines in this file and I need to stop the project in the terminal first and now I need to select the full stack from here and I will click on this green icon and when I will click on the screen icon it will start attaching debugger to our project as you can see in the terminal and it will open up a new window in our browser and we don't need to actually run our project to make it work it will automatically run our project on Port 3000 as you can see over here now if we go to the browser and here you can see that this is the new window and our project is running now we are at the home page we need to click on the portfolio page which I have clicked and now you can see that it has stopped a hair on this line the breakpoint and this is the server component and here you can see that this server component is actually we are able to debug so let's try to click on the next line and if I hover over the title you can see the value of that title here directly in our vs code so this is how we actually debug at break points and stop the execution of the program directly in the vs code and at the same time if I try to debug our code which is the client-side code let me add a debugger here the breakpoint in this component it and let's try to move on and now this component is the Home Route actually and it is a client component let's go to our browser and try to navigate to the Home Route and now you can see that this is the client component and it has stopped over here if I hover over an object we can see all the data coming up from an object and it is a constant data currently we usually test the data which is coming from the API but we have actually tested that how we can test the server components and the client components at the same time by running a one debugger in vs code directly for the next js13.4 projects all right so if you like my video don't forget to subscribe my channel hit the like button and comment below if you have any question see you guys in the next videos

Channel: Programming with Umair

Views: 7,737

Keywords: debugging nextjs app, debug nextjs in vscode, how to debug in visual studio code, debugging best practices, debugging in javascript, breakpoints in vscode react, how to debug code in vscode, how to run debugger in vscode, javascript debugging, react debugging, nextjs debugging, next js debugging, web development, debug html in vscode, print console log in vscode, debug angular in vscode, learning, next js tutorial, react js tutorial, react vs next

Id: YzTWKenM5P0

Length: 10min 56sec (656 seconds)

Published: Tue Aug 08 2023