Lesson Weekend

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.

Chrome Developer Tools

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.

Chrome Developer Tools

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: http://www.learnhowtoprogram.com/courses.

Developer Tools Network Tab

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.

Request Details

When we click on a request, we can see more details about the request:

Dev Tools Request Headers

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.

Response Details

We can also see response details for the courses request:

Dev Tools Response Headers

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:

Dev Tools Response Body

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.

Tips


  • 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

Examples


Request Details

Dev Tools Request Headers

Response Details

Dev Tools Response Headers

Response Body

Dev Tools Response Body