As web developers, we need to be able to to look at requests and responses between the client and server. In this lesson, we'll look at the Developer Tools in Chrome that offer a peek into the requests and responses in the browser.
The Chrome browser is the preferred browser for many web developers because it offers a number of tools that make developing easier. To find these tools, we go to the Chrome menu button > More Tools > Developer Tools (or Cmd+Option+j on Mac and Ctrl+Shift+i on PC). On our Epicodus keyboards the shortcut is [windows]+Alt+j.
At the bottom of our browser window, the Developer Tools window will open. To see HTTP requests and responses for the pages we visit, we'll select the network tab (second from the left) and navigate to the Learn How to Program main page:
We'll see quite a number of lines appear in our window. Each line is a request that has been made from our client to the server. Our first request was for the
courses resource. We see it was successful or
OK because there is a status of 200.
The type of resource is a document (in this case an HTML document). As you may imagine, there are still more resources necessary to display this page beyond the HTML document. For each additional resource (stylesheet, script, image files, etc) required in the HTML, the client makes a new request and the server will return a new response.
When we click on a request, we can see more details about the request:
In the General section, we see the IP address for the server, the URL that was sent in the request and the method. Under Request Headers, we can see how the headers including several previously noted in the URL and HTTP requests lessons: the host name, method, path, scheme, and user-agent.
We can also see response details for the
In the General section, we see that the Status Code shows a green light
200 OK. This means the server completed the successful processing of the request.
In the Response headers section, we can see the headers that were returned in the response message including server and status that were discussed in the HTTP responses lesson.
To see the raw response that also includes the response body, click the Response tab to the right of the Headers tab:
Notice in the lower left of the window that a total of 16 requests were made resulting from the initial request for the resource
/courses. So, when you arrive on the main Courses page for Learn How To Program the HTTP request-response cycle included 16 requests with 16 responses.
Visit several sites with the Developer Tools and see if you can analyze the request-response details behind the final display that you see in your browser window.
To access Developer Tools in Chrome Chrome menu button > More Tools > Developer Tools
Keyboard Shortcut to Developer Tools in Chrome (Windows): Ctrl+Alt+I
Keyboard Shortcut to Developer Tools in Chrome (Mac): Cmd+Option+I