Hi.
In this video I will show you how we can debug the code and how we can expect things that are happening
on our website, on our application, and I will explain more during the tutorial because we will use
it a lot before we will start with anything else, I would like to show you what is available and how
we can access that.
So at the moment I'm in the Firefox here and what you can do it in any browser.
So I pick a random website here and let's try to inspect what's happening here.
So this is how the website looks like for a normal user by normal user is I mean the user that will
use this website.
But for us developers, we have another options inside our browsers that we can use for our advantage.
So anywhere on the website I can right click here and I can do inspect element and that will be available
option in every single browser.
So basically what we need to do is we need to inspect.
So once I will inspect, you can see on the right hand side here or it might be here on the door, dock
to bottom like that depends on your setup.
There is a new section available.
You can close it and you will see the whole page like this.
Or you can just open clicking web developer.
And you can see here, inspector, for example.
So what we have here, you can see here, it's our website start to flashing because we hover on things
and some things happen.
I'll revert it back to the side.
So I will pick.
Dr. Right and we'll have more spaces here.
So basically we have few taps here.
The first one is Inspector.
Inspector, help us inspect the page.
So let's say we have this logistic simplified here.
I can click on this and we can see here this is highlighted so we can see what was the element written
to display this.
And you can see this was H1 tag with some class here.
And if you go here.
I will make it a little bit bigger.
For you to see.
So basically, if I click right, click here and I will inspect, you can see here, this is our H1
tag.
Also, this is the CSS elements available for this selector.
So you can see here class element heading.
This is the one that controls the font size and you can see 55.
It's the font size for this.
So I can actually toggle this.
You can see on and off or I could click on this and I can change it from here.
So I can see I can change it to 100 pixels.
And this is so big.
It doesn't mean that I change the website.
I just change the view of this website if I refresh it now.
You can see everything is back to normal because we just launched a new website from the server and
this is how the setup and you can see 55 is back again.
So changing here is just a temporary changes, but this is sometimes very useful if you would like to
tweak something.
A Precisely.
So it's better to play in the browser and once you know what will be the values here, you can code
it in your text editor.
So basically you you have a little bit options here for HTML and also you have CSS.
So you can play either with this or you can with this.
If I will click this and I will remove it, I can remove it from the website.
You can see clicking on this element, clicking delete.
I can remove the whole elements like this and the website change automatically.
So another option is console.
Console is something that we can.
It's a space where we can send some messages or we can see some errors and so on.
So if we will like to push something from our code, some information to the browser, we can do it
console log and it will be pushed here and available here.
Also, we can test our JavaScript here.
So what I can do is I can do.
For example.
And you can see I've done this alert hello on the website because I can write here any JavaScript.
So I can also do, for example, things like this.
And you can see that's the date, the current date as we are in and now.
So this is the space where we can see the data and we can use the data and experiment with the data.
Another tab, I don't see it here, but I can click on the icon.
Here is the very useful is the network tab.
Network tab.
Show us everything what has been downloaded from the backend from the server.
So you can see here the methods has been used and the data, if I click on any of those, you can see
if I go response, I can see the.
User modules and other information that has been downloaded from this page.
So this this is what we will use to see the data coming from our Django API.
And you can see this is also a Json format.
So we will use a similar thing.
If I will have that resources here.
I can also click on all and I will see all the resources, but at the moment we are interested in X,
which is the calls for a server to get the data.
If I will say click on this.
To load another page.
You can see more data has been downloaded.
And for example, this get here.
You can see some information has been requested from the server.
And display it on this page.
Like, for example, you can see here save 30% on logistic goals.
It's probably some of the text that is displayed on this page.
So they load it from our from their backend API and display that on front end.
So this is how you work with this inspector and you have a few tabs there and there is a more options.
So go ahead and explore what's available there and whatever you would like to toggle it, you can close
it and you can do right click and inspect element and then you can switch to any tab you like.
So this is built in every single browser and we will be using that a lot in our tutorials.