All right.
So now that we know how to debug the frontend site of a website
in this lecture, let's see how to debug Node.js using your Visual Studio code.
Right?
So for the demonstration of this lecture, I will be using a simple Create app
which I haven't shown you to learn this course,
but if you want to follow along,
you can download it from the resources given and just start right.
So I have started my server this next hour JS file
using Norman and let me show you what this project does.
So inside this project I have a list of products
and I can see the details of the product like Price, and
I can delete them or I can edit the products as well.
So all the correct functionalities, I can add a new product as well.
So this is a simple project that I have.
And now let's suppose at any point of time I am not able to see
all of my products listed on this all products page.
And so I need to figure out what the issue is.
And for this I can use debugging.
So let me go to my voice code and here you can see the get out for products page.
And inside here I'm finding all the products using this find function.
So I can just put a breakpoint here and I can start debugging the code.
So before that, let me tell you one thing that in order to use the same project,
you need to have MongoDB and Node installed in your device.
So you can first of all install them and then get to this project, right?
So I have my breakpoint here
where I am rendering all of the products into my E just fine.
Now let's go to our debugging panel and inside here
all we need to create our configuration.
So let's click on this create launchpad, this one file.
And inside here we are going to choose the Node.js configuration.
So Node.js and by default
you will be given with a request of launch and this is pretty much
okay to start with, but make sure and this program section,
the file name of your server is correct.
So in my case, my SO was in next door.
Jess And the way I live here is also in next door.
Jess Right.
So now what I'm going to do is in order to use the launch request,
I need to first of all stop myself from terminal
so I can press the control C and Y to stop it.
Now after that, I can launch my program for debugging.
I have chosen my big point, so as soon as it finds all the products
and as soon I goes to render all the products
inside this get function, it will pause the execution.
Right?
So let's click on this debugging button and you can see
let me just refresh this page and now you can see
my voice code as far the execution of the program.
And I have four and I have found all the products.
So you can see inside the products, as I've shown you,
I have two products and this page and they are all listed here.
So you can see in this section that the category name and prices as well.
So this is how to use the launch request.
Now there are a couple of request as well, but before that, I think that all of you
might be familiar with using this continuous step out in step in it.
So I can just simply continue this program.
And after that, you will be seeing
that this page has been loaded because the debugging is over.
So let me just stop this debugging here and we are going to add a couple
of more configurations to our launch adagio.
So on file, right?
So I can click on this add configuration option and from here
I can select the node, just attach configuration.
And inside this, the default bolt pointer device will be nine to do nine.
You can also check it, right?
So you can check it by going to your terminal.
And inside here you have to type in node or node
one are des des inspect and the file name of show.
So in this case and next door to this side.
So here I can see the default port is 9 to 9
and this is same it is like here right So we have started our so on
and basically this attached request is used to debug
the port of a locally running node just for it.
So in order to use this you have to first of all
ran the node GSO and debug mode.
So you have to type in node
one on node that is just inspect and don't indexed ideas.
Right?
So after that I can click on this.
I can change the configuration from here.
This is the attachment.
Also, as, as you know, I am using Norman, so Norman's automatically.
It started as well as soon as I hit the save button.
So as soon as I had the say button and you can see the server is restarting.
So if my always getting these started, then I have to restart
my debugging as well.
And in order to restart or in order to avoid restarting again and again,
I can click, I can add I actually moved here, so this will be restart
and I can set it to to actually save this file.
Now let me close this we have done with this now let's run it for debugging.
So let me click over here and you can see
I will actually just refresh this page and you can see I got all the products
and all the debugging variables that I got previously.
Also, as this is attaching to my locally running
nor DSA was then I can just simply hover over the variables
name and I can see that debugging values like I can hold whatever the product
and I'm able to see there are two products available also.
Similarly, I can do whatever any of the be was similarly inside here as well.
I can use the step over step and two and step out function
and I can use this to stop debugging.
Right?
So this is all about debugging Node.js using your Bridges studio code.
If you face any difficulty while debugging your code,
you can just simply ask me in the comment sections.
So in the next lecture we will see how to debug
your favorite programing language using Visual Studio Code.
So see you in the next lecture.