1 00:00:06,050 --> 00:00:07,280 In this video. 2 00:00:07,310 --> 00:00:16,370 What we are going to do is we want to know more about the request and then the response in case something 3 00:00:16,370 --> 00:00:17,360 goes wrong. 4 00:00:17,360 --> 00:00:19,070 How can we rectify? 5 00:00:19,100 --> 00:00:25,850 Or if everything was okay, how can we have the visualization of the actual response? 6 00:00:26,150 --> 00:00:31,640 Well, we can still use the terminal to have a peek into the response. 7 00:00:31,640 --> 00:00:37,580 For example, if something goes wrong, then will we be able to see inside the terminal? 8 00:00:37,820 --> 00:00:44,870 But we also have the browser where we can also have a peek into the request and then response. 9 00:00:44,870 --> 00:00:50,060 In that way it will help us to debug an error in case there is one. 10 00:00:50,450 --> 00:00:58,220 So first step is let's run the server that is node server and you can see that the server is up and 11 00:00:58,220 --> 00:00:58,910 running. 12 00:00:59,420 --> 00:01:01,760 The next step is let's enter. 13 00:01:01,820 --> 00:01:06,410 You are into the browser that is local host colon 9000. 14 00:01:06,500 --> 00:01:11,420 When I hit Enter now we get back our response. 15 00:01:11,690 --> 00:01:16,730 So to know more about the response, we are going to use the console. 16 00:01:16,940 --> 00:01:19,280 So open the console. 17 00:01:20,000 --> 00:01:28,430 Next step is you can see we have couple of taps here, but the one that we care most is called the network. 18 00:01:28,820 --> 00:01:33,410 And under our network it can see we have couple of tabs here. 19 00:01:33,890 --> 00:01:39,560 So this tab tells you more details about their requests and their response. 20 00:01:39,770 --> 00:01:47,300 So we are going to use few of them, for example, the O and then fetch a child JavaScript and CSS. 21 00:01:47,450 --> 00:01:50,030 So let's click on all meaning. 22 00:01:50,030 --> 00:01:56,540 You want to have everything about the response concerning the request, the loading of JavaScript in 23 00:01:56,540 --> 00:01:57,560 any asset. 24 00:01:57,560 --> 00:02:05,150 So click on all and now let's click on or refresh the URL or the page. 25 00:02:05,420 --> 00:02:13,010 So as soon as I refresh it, you can see that we have additional tabs here, which gives details about 26 00:02:13,010 --> 00:02:15,290 the request and then response. 27 00:02:15,680 --> 00:02:23,570 You can see we have name that specify the URL of which we entered that is a lookout host and we have 28 00:02:23,570 --> 00:02:30,950 the status code telling us that is 200, which simply means the request or the response was successful. 29 00:02:31,280 --> 00:02:39,530 And we also have size which tells us the size of our file and at time represents the time the content 30 00:02:39,530 --> 00:02:40,490 got loaded. 31 00:02:40,490 --> 00:02:45,620 It took 3 seconds to be able to display this HTML template. 32 00:02:46,010 --> 00:02:53,960 Now let's click on Look our host and you can see that we have couple of tabs here, headers, preview, 33 00:02:53,960 --> 00:02:56,630 response, initiator and timing. 34 00:02:56,810 --> 00:03:04,220 So what we care most is these three headers preview and response if you click on headers. 35 00:03:05,170 --> 00:03:13,930 You could see that you also have additional taps here and we have what is called requested u r l this 36 00:03:13,930 --> 00:03:16,530 is a u r of the user requested. 37 00:03:16,540 --> 00:03:18,970 That is a home page as that. 38 00:03:19,480 --> 00:03:22,500 And then we have what is called referrer policy. 39 00:03:22,510 --> 00:03:23,650 Don't worry about this. 40 00:03:23,650 --> 00:03:31,600 If you get back to experts, you know more about cross origin and and our request header is we have 41 00:03:31,600 --> 00:03:39,730 accept meaning the kind of file this server can accept and we have accept encoding as that. 42 00:03:39,730 --> 00:03:44,290 And the language of the server by default is English. 43 00:03:44,530 --> 00:03:50,590 And the host here as we spoke about, represent what is called the lookup host. 44 00:03:50,620 --> 00:03:53,260 That is the current connection device. 45 00:03:53,410 --> 00:03:56,560 So these are a few properties about the headers. 46 00:03:56,770 --> 00:04:01,540 Well, the header changes depending on the HTTP method. 47 00:04:01,720 --> 00:04:08,530 If you use post, if we see that you want to see the payload or the actual content inside the header 48 00:04:08,560 --> 00:04:16,149 as we move on, we'll be coming here to explore more and in the preview when I refresh it and let's 49 00:04:16,149 --> 00:04:25,330 click on that and preview it, we see that this is what came back after the request and then response 50 00:04:25,330 --> 00:04:28,270 is what kind of data that got back. 51 00:04:28,660 --> 00:04:37,720 And definitely it's an HTML because is a HTML that got into the browser and the browser gives us what 52 00:04:37,720 --> 00:04:38,890 we have here. 53 00:04:39,280 --> 00:04:44,650 So as we move on, we be coming back here to revisit this page. 54 00:04:44,920 --> 00:04:51,340 Let's try to shut down a server like that and now let's refresh it and have a look. 55 00:04:51,400 --> 00:04:57,820 And we see that something has happened, meaning status, which means failure, meaning that the connection 56 00:04:57,820 --> 00:04:59,290 was not successful. 57 00:04:59,380 --> 00:05:07,450 And if you click on that and click on headers, you see more about the information we see fail to load. 58 00:05:07,660 --> 00:05:14,860 So we can use this tool to have a peek into our response and request the next video. 59 00:05:14,890 --> 00:05:17,620 We are going to start our first coding challenge. 60 00:05:17,620 --> 00:05:20,050 So let's get rocking then this video.