Setup Debugging Nextjs in VScode

so in this video quickly I want to show you how you can debug your code your project in vs code and actually it's for nextjs projects and it could work for other projects as well but it's basically specific to nextjs in this video okay so it's really simple and actually there is a couple of ways to do that but um this is the best way to do it and because it's based on the n JS documentation itself so uh I think it's good that you go with this way I've seen a couple of other videos uh but um they don't work in a right way actually some of them if you don't the configuration right uh there are times that it just opens um a new Chrome tab which actually doesn't have this uh existing session so you have to log in again and refresh everything uh from scratch so let's jump into the code and see how we can deal with it so here I have a project and actually this is my SAS project I'm working on this and it's going to be a real thing uh where is it it's here so it's going to be a real application I'm working on this it's a uh CV job description comparison uh application so basically you insert your CV here and also the job description and when you push um when you click on analy button it gives you some kind of a score and some kind of analysis about how your CV is a good match a good fit for this job uh position so I'm not going to talk about this SAS projects just wanted to uh see how we can do it in a real project so uh in the main uh folder in the main route after your project here you uh if you don't have this folder. vs code you need to create this folder. vs code and then inside that you need to create a new file called launch. Json and when you have this you should put the configuration here the configuration is like this so it's just simple way in and here we have some configurations and well in different uh ways you can actually add or remove some of these configurations but this is the best combination I think uh and with this configuration you don't have to run your project separately so uh with this configuration it's going to run first run your project and then on top of that you can debug your uh code so first we want to run our project and here uh use npm ROM Dev actually and if you use yarn you need to replace it with yarn to run your project and also here because I have multiple versions of node uh on my system so first I want to select U node version 18 to work with this one so and we use this and then I can run my project with npm ROM Dev and then here we have the actual configuration for launching a browser and then this is the configuration for attaching the browser to vs code to actually do the uh the bugging so you don't have to know what it does actually behind the scenes so just the configuration and the easiest way to get this configuration is from the uh NEX js. org U Docs or you could search like this and nextjs vs code debach and it's going to be the first probably the first item in your search so click on that and here you have the debugging configuration for vs code which is really simple and you don't have to do that much uh one other thing is that make sure that here you put a right um well it doesn't matter that much but keep remember that this is the port you're going to use for your application so let me just run this when you have this configuration in vs code folder and under launch. js. Json file you just need to go to this run and debug uh section here and just select your uh configuration and then you can just press run button and here you can see that first it runs the project and then it's ready for uh debugging and when you see this Navar toolbar basically here it means that it's in the debugging mode so now uh to do the debugging actually you need to uh put some break points in your code so here for instance uh when I want to upload a file and after uh file uploading is done I want to see the result so here I can just put a breakpoint you can see it's a mty DOT empty white dot here and now the only thing I need to do just go to the application and here you only can need to do just login and you can see that it uh logged in automatically because it I'll have already a session here now for instance if I upload a file here load it now if I go back to my code now you can see that the uh White empty circle turned into a red button a red Point here so it means that now the program stopped here so you can come to this uh Navar here to the section and to the de console and here you can say that for instance I want file that URL and you can print it here so this is my file URL and you can also see the variables at the running time here so I have this file metadata here and all kinds of other information so this is basically gist of debugging there is a lot of good tools here with vscode and actually you can trace back the code for instance in Co stack here and but that's all pretty much for setting up the uh configuration I hope you enjoy this video don't forget to subscribe to my Channel please okay thank you bye-bye

Channel: ShiriTech

Views: 127

Keywords:

Id: 3g86o1xMNs8

Length: 7min 29sec (449 seconds)

Published: Mon Jun 03 2024