WEBVTT 00:00.620 --> 00:01.460 Hi. 00:01.580 --> 00:09.020 In this video I will show you how we can debug the code and how we can expect things that are happening 00:09.020 --> 00:15.470 on our website, on our application, and I will explain more during the tutorial because we will use 00:15.470 --> 00:21.050 it a lot before we will start with anything else, I would like to show you what is available and how 00:21.050 --> 00:22.220 we can access that. 00:22.220 --> 00:27.560 So at the moment I'm in the Firefox here and what you can do it in any browser. 00:27.560 --> 00:32.810 So I pick a random website here and let's try to inspect what's happening here. 00:32.810 --> 00:41.600 So this is how the website looks like for a normal user by normal user is I mean the user that will 00:41.600 --> 00:42.740 use this website. 00:42.740 --> 00:50.270 But for us developers, we have another options inside our browsers that we can use for our advantage. 00:50.540 --> 00:58.220 So anywhere on the website I can right click here and I can do inspect element and that will be available 00:58.220 --> 01:01.280 option in every single browser. 01:01.280 --> 01:04.610 So basically what we need to do is we need to inspect. 01:05.090 --> 01:12.590 So once I will inspect, you can see on the right hand side here or it might be here on the door, dock 01:12.590 --> 01:16.100 to bottom like that depends on your setup. 01:16.490 --> 01:18.260 There is a new section available. 01:18.260 --> 01:21.860 You can close it and you will see the whole page like this. 01:21.890 --> 01:26.240 Or you can just open clicking web developer. 01:28.360 --> 01:31.000 And you can see here, inspector, for example. 01:31.120 --> 01:38.260 So what we have here, you can see here, it's our website start to flashing because we hover on things 01:38.260 --> 01:40.330 and some things happen. 01:40.360 --> 01:42.190 I'll revert it back to the side. 01:42.190 --> 01:43.660 So I will pick. 01:49.500 --> 01:53.100 Dr. Right and we'll have more spaces here. 01:53.100 --> 01:56.320 So basically we have few taps here. 01:56.340 --> 01:58.350 The first one is Inspector. 01:58.380 --> 02:01.110 Inspector, help us inspect the page. 02:01.110 --> 02:04.260 So let's say we have this logistic simplified here. 02:04.260 --> 02:11.580 I can click on this and we can see here this is highlighted so we can see what was the element written 02:11.580 --> 02:12.750 to display this. 02:12.750 --> 02:16.980 And you can see this was H1 tag with some class here. 02:17.400 --> 02:19.770 And if you go here. 02:21.960 --> 02:23.670 I will make it a little bit bigger. 02:25.190 --> 02:26.690 For you to see. 02:28.340 --> 02:34.160 So basically, if I click right, click here and I will inspect, you can see here, this is our H1 02:34.160 --> 02:34.790 tag. 02:35.090 --> 02:39.940 Also, this is the CSS elements available for this selector. 02:39.950 --> 02:42.590 So you can see here class element heading. 02:42.620 --> 02:46.850 This is the one that controls the font size and you can see 55. 02:47.030 --> 02:48.530 It's the font size for this. 02:48.530 --> 02:50.330 So I can actually toggle this. 02:50.360 --> 02:56.150 You can see on and off or I could click on this and I can change it from here. 02:57.820 --> 03:00.280 So I can see I can change it to 100 pixels. 03:00.280 --> 03:01.510 And this is so big. 03:01.540 --> 03:03.670 It doesn't mean that I change the website. 03:03.670 --> 03:07.570 I just change the view of this website if I refresh it now. 03:11.320 --> 03:17.110 You can see everything is back to normal because we just launched a new website from the server and 03:17.110 --> 03:20.380 this is how the setup and you can see 55 is back again. 03:20.380 --> 03:28.090 So changing here is just a temporary changes, but this is sometimes very useful if you would like to 03:28.090 --> 03:28.990 tweak something. 03:29.250 --> 03:30.100 A Precisely. 03:30.100 --> 03:36.070 So it's better to play in the browser and once you know what will be the values here, you can code 03:36.070 --> 03:38.050 it in your text editor. 03:38.050 --> 03:45.310 So basically you you have a little bit options here for HTML and also you have CSS. 03:45.310 --> 03:47.860 So you can play either with this or you can with this. 03:47.890 --> 03:51.700 If I will click this and I will remove it, I can remove it from the website. 03:51.700 --> 03:54.520 You can see clicking on this element, clicking delete. 03:54.520 --> 03:59.710 I can remove the whole elements like this and the website change automatically. 03:59.710 --> 04:02.230 So another option is console. 04:02.260 --> 04:04.840 Console is something that we can. 04:05.230 --> 04:11.080 It's a space where we can send some messages or we can see some errors and so on. 04:11.080 --> 04:16.810 So if we will like to push something from our code, some information to the browser, we can do it 04:16.810 --> 04:19.810 console log and it will be pushed here and available here. 04:19.810 --> 04:23.800 Also, we can test our JavaScript here. 04:23.800 --> 04:25.840 So what I can do is I can do. 04:27.760 --> 04:28.870 For example. 04:32.280 --> 04:38.490 And you can see I've done this alert hello on the website because I can write here any JavaScript. 04:38.490 --> 04:43.170 So I can also do, for example, things like this. 04:43.170 --> 04:48.420 And you can see that's the date, the current date as we are in and now. 04:48.600 --> 04:55.230 So this is the space where we can see the data and we can use the data and experiment with the data. 04:55.290 --> 04:58.680 Another tab, I don't see it here, but I can click on the icon. 04:58.680 --> 05:03.630 Here is the very useful is the network tab. 05:03.660 --> 05:04.830 Network tab. 05:04.860 --> 05:11.190 Show us everything what has been downloaded from the backend from the server. 05:11.190 --> 05:17.880 So you can see here the methods has been used and the data, if I click on any of those, you can see 05:17.880 --> 05:21.210 if I go response, I can see the. 05:22.120 --> 05:28.360 User modules and other information that has been downloaded from this page. 05:28.450 --> 05:35.020 So this this is what we will use to see the data coming from our Django API. 05:35.200 --> 05:37.660 And you can see this is also a Json format. 05:37.660 --> 05:40.390 So we will use a similar thing. 05:40.390 --> 05:43.420 If I will have that resources here. 05:43.560 --> 05:49.930 I can also click on all and I will see all the resources, but at the moment we are interested in X, 05:50.530 --> 05:53.610 which is the calls for a server to get the data. 05:53.620 --> 05:56.200 If I will say click on this. 05:57.580 --> 05:59.050 To load another page. 06:00.530 --> 06:03.410 You can see more data has been downloaded. 06:03.410 --> 06:06.140 And for example, this get here. 06:08.210 --> 06:12.620 You can see some information has been requested from the server. 06:13.300 --> 06:16.540 And display it on this page. 06:17.050 --> 06:22.690 Like, for example, you can see here save 30% on logistic goals. 06:22.720 --> 06:26.170 It's probably some of the text that is displayed on this page. 06:26.170 --> 06:33.040 So they load it from our from their backend API and display that on front end. 06:33.070 --> 06:41.050 So this is how you work with this inspector and you have a few tabs there and there is a more options. 06:41.050 --> 06:47.140 So go ahead and explore what's available there and whatever you would like to toggle it, you can close 06:47.140 --> 06:53.160 it and you can do right click and inspect element and then you can switch to any tab you like. 06:53.170 --> 07:00.220 So this is built in every single browser and we will be using that a lot in our tutorials.