1 00:00:01,060 --> 00:00:04,450 ‫So after the kind of heavy, theory lecture, 2 00:00:04,450 --> 00:00:07,236 ‫let's now actually see http in action 3 00:00:07,236 --> 00:00:09,640 ‫and do some requests and take a look 4 00:00:09,640 --> 00:00:14,163 ‫at the responses we got using our browsers developer tools. 5 00:00:15,670 --> 00:00:18,260 ‫So I'm using Google Chrome as my browser, 6 00:00:18,260 --> 00:00:21,100 ‫and I'm here on udemy.com. 7 00:00:21,100 --> 00:00:23,260 ‫So, just go to udemy.com, 8 00:00:23,260 --> 00:00:25,073 ‫and then open your developer tools. 9 00:00:26,410 --> 00:00:31,150 ‫And I am using the command option J for that on my Mac, 10 00:00:31,150 --> 00:00:33,870 ‫on Windows it's probably Alt+Ctrl+J, 11 00:00:33,870 --> 00:00:36,100 ‫or just right click anywhere on the page 12 00:00:36,100 --> 00:00:38,260 ‫and then click inspect, 13 00:00:38,260 --> 00:00:42,100 ‫just in case you're not familiar with the dev tools. 14 00:00:42,100 --> 00:00:45,120 ‫Then, what we're gonna do is to head over 15 00:00:45,120 --> 00:00:46,820 ‫to the network tab. 16 00:00:46,820 --> 00:00:49,000 ‫And then click here on disable cache. 17 00:00:49,000 --> 00:00:51,110 ‫That's important because otherwise 18 00:00:51,110 --> 00:00:54,240 ‫you might be loading the page from your computer 19 00:00:54,240 --> 00:00:57,310 ‫because you've been to udemy.com before. 20 00:00:57,310 --> 00:00:59,930 ‫Okay, so let's now reload the page, 21 00:00:59,930 --> 00:01:02,665 ‫so that we're gonna kind of record 22 00:01:02,665 --> 00:01:06,640 ‫the network activity here in this network tab. 23 00:01:06,640 --> 00:01:08,440 ‫So reload this. 24 00:01:08,440 --> 00:01:11,500 ‫And so now here we can see all the requests 25 00:01:11,500 --> 00:01:14,060 ‫that are happening on the page. 26 00:01:14,060 --> 00:01:18,130 ‫So as I told you, there are gonna be lots of requests 27 00:01:18,130 --> 00:01:20,743 ‫for all the elements that are on the page. 28 00:01:21,740 --> 00:01:23,200 ‫Now if we're going the top here, 29 00:01:23,200 --> 00:01:26,820 ‫the first of all is actually udemy.com. 30 00:01:26,820 --> 00:01:29,870 ‫And we can see here the status code, which is 200, 31 00:01:29,870 --> 00:01:31,550 ‫as I said in the last lecture, 32 00:01:31,550 --> 00:01:33,040 ‫that means okay. 33 00:01:33,040 --> 00:01:35,030 ‫So everything went right. 34 00:01:35,030 --> 00:01:37,130 ‫Then the size and the time it took 35 00:01:37,130 --> 00:01:39,500 ‫to download this resource. 36 00:01:39,500 --> 00:01:43,000 ‫But then, we also have all of these other resources here 37 00:01:43,000 --> 00:01:46,220 ‫like the CSS files you see here, 38 00:01:46,220 --> 00:01:48,770 ‫some images, java script files 39 00:01:50,550 --> 00:01:51,970 ‫like I have here. 40 00:01:51,970 --> 00:01:54,830 ‫And all of these were actually initiated by the index, 41 00:01:54,830 --> 00:01:56,913 ‫so by the root page. 42 00:01:57,820 --> 00:02:00,140 ‫Okay, so we have udemy.com and that one 43 00:02:00,140 --> 00:02:02,430 ‫will then request all of these assets. 44 00:02:02,430 --> 00:02:05,840 ‫So that is the index, so it doesn't happen in initiator, 45 00:02:05,840 --> 00:02:10,840 ‫and all of these here were requested by the main udemy.com. 46 00:02:11,340 --> 00:02:14,220 ‫Now if we click on one of these resources, 47 00:02:14,220 --> 00:02:16,730 ‫and let's do actually udemy.com first. 48 00:02:16,730 --> 00:02:19,490 ‫Here we can get some more information about the request, 49 00:02:19,490 --> 00:02:20,519 ‫and the response. 50 00:02:20,519 --> 00:02:25,470 ‫So first, the request which is actually at the bottom. 51 00:02:25,470 --> 00:02:29,040 ‫And you'll see that the request was made to udemy.com, 52 00:02:29,040 --> 00:02:31,100 ‫we did a get request, 53 00:02:31,100 --> 00:02:33,920 ‫and the path was just the root path, 54 00:02:33,920 --> 00:02:37,450 ‫just like I explained to you in the last video, okay. 55 00:02:37,450 --> 00:02:39,440 ‫Then we have a bunch of headers, 56 00:02:39,440 --> 00:02:41,430 ‫so this here for example means 57 00:02:41,430 --> 00:02:46,010 ‫that the page was compressed using just a gzip. 58 00:02:46,010 --> 00:02:50,050 ‫Down here you have a header for setting some cookies, 59 00:02:50,050 --> 00:02:51,990 ‫and a bunch of other headers 60 00:02:51,990 --> 00:02:54,810 ‫which we will talk about later on. 61 00:02:54,810 --> 00:02:56,970 ‫So this is the request, 62 00:02:56,970 --> 00:02:58,520 ‫and then the response 63 00:02:58,520 --> 00:03:02,840 ‫also has a bunch of all of these headers, okay. 64 00:03:02,840 --> 00:03:06,700 ‫So we can see when the response was actually sent. 65 00:03:06,700 --> 00:03:09,521 ‫We can see a bunch of cookies, 66 00:03:09,521 --> 00:03:11,820 ‫and the status code here as well, 67 00:03:11,820 --> 00:03:15,120 ‫so that's where the 200 status code comes from. 68 00:03:15,120 --> 00:03:18,330 ‫And again, a bunch of other headers, 69 00:03:18,330 --> 00:03:21,100 ‫that we're gonna talk about a bit later, okay. 70 00:03:21,100 --> 00:03:22,260 ‫And the same, of course, 71 00:03:22,260 --> 00:03:27,000 ‫we have for all the other assets that were downloaded. 72 00:03:27,000 --> 00:03:30,180 ‫So the response and the request down here. 73 00:03:30,180 --> 00:03:32,120 ‫And this time we actually see that 74 00:03:32,120 --> 00:03:34,880 ‫the root here is still udemy.com, 75 00:03:34,880 --> 00:03:36,930 ‫so what they call the authority here, 76 00:03:36,930 --> 00:03:39,980 ‫but the path is then all of this, 77 00:03:39,980 --> 00:03:41,875 ‫so this location here, 78 00:03:41,875 --> 00:03:45,850 ‫where the CSS file is located. 79 00:03:45,850 --> 00:03:49,260 ‫And if we actually now browse somewhere here on this page, 80 00:03:49,260 --> 00:03:52,080 ‫let's say to the web development courses, 81 00:03:52,080 --> 00:03:55,253 ‫well, then let's see what happens here. 82 00:03:56,920 --> 00:03:59,580 ‫And, so here, we have this page, 83 00:03:59,580 --> 00:04:02,810 ‫which is the web development resource, okay. 84 00:04:02,810 --> 00:04:05,690 ‫So basically this piece here of the URL. 85 00:04:05,690 --> 00:04:07,620 ‫Remember that this is called a resource, 86 00:04:07,620 --> 00:04:09,520 ‫from the last video. 87 00:04:09,520 --> 00:04:11,289 ‫So if we click on that, 88 00:04:11,289 --> 00:04:14,787 ‫we will actually see that here again, right. 89 00:04:17,210 --> 00:04:18,120 ‫So we have again 90 00:04:18,120 --> 00:04:22,750 ‫udemy.com and the /coursesdevelopment/webdevelopment. 91 00:04:22,750 --> 00:04:27,040 ‫So that is the path where the request is going to. 92 00:04:27,040 --> 00:04:30,190 ‫Here on the left side we can also like preview images 93 00:04:30,190 --> 00:04:32,460 ‫for example, this logo here. 94 00:04:32,460 --> 00:04:34,610 ‫When it's an image, we can see the preview, 95 00:04:35,580 --> 00:04:37,790 ‫we can see the response of it better. 96 00:04:37,790 --> 00:04:40,930 ‫For example, in this one here, 97 00:04:40,930 --> 00:04:44,830 ‫we can actually see the html response that came back. 98 00:04:44,830 --> 00:04:48,920 ‫So instead of just seeing the headers like we did here, 99 00:04:48,920 --> 00:04:51,360 ‫we can actually see the response as well, 100 00:04:51,360 --> 00:04:55,810 ‫and a nice overview of all the cookies that were set 101 00:04:55,810 --> 00:04:57,500 ‫in this request. 102 00:04:57,500 --> 00:05:00,240 ‫Now we didn't talk about cookies just yet, 103 00:05:00,240 --> 00:05:03,230 ‫but again that's something for later. 104 00:05:03,230 --> 00:05:06,790 ‫But I think it's important that you get this overview 105 00:05:06,790 --> 00:05:10,120 ‫of how requests and responses actually look like 106 00:05:10,120 --> 00:05:11,090 ‫under a hood. 107 00:05:11,090 --> 00:05:13,610 ‫So that was exactly the goal of this video, 108 00:05:13,610 --> 00:05:17,460 ‫I hope the message was clear, 109 00:05:17,460 --> 00:05:18,990 ‫and that everything made sense. 110 00:05:18,990 --> 00:05:20,220 ‫And so, let's now move on 111 00:05:20,220 --> 00:05:24,213 ‫and continue talking about backend development in general.