2.8: Chrome Networking

Introduction
We may not have noticed, but we've already been using our browsers' networking functionality. We're now ready to observe how our browsers request and retrieve HTML files when we visit domains such as google.com. **Every time we enter a URL into our browser we send a request to retrieve an HTML file. **This mechanic is the foundation of the Internet.
DevTools Network Tab
We can use the DevTools Network tab to analyse network requests from our browser.
The DevTools Network tab shows a chronological list of all HTTP requests from the current page.
1.Click on one of the items in the list of requests to see that request's details.
2.Click on the Response tab within the detailed request view to see the raw response text.
HTTP Request Triggers
There are multiple ways to trigger HTTP requests from our browsers. The following are some we've seen already.
Typing in Address Bar
When we enter a URL in our address bar, the following happens.
1.Our browser sends a DNS request to resolve the URL's domain to an IP address.
2.Once the browser identifies the IP address, it sends an HTTP GET request to that IP.
HTML Tags Referencing External Resources
Link and Script Tags
1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
2
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
Copied!
Link and Script tags download files for the browser to parse, which may not change visual output.
Img Tags
1
<img src="http://www.images.com/example.jpg"/>
Copied!
Img tags download a file to display on the page.
Link Tags
1
<a href="http://www.google.com">google</a>
Copied!
Link tags trigger HTTP GET requests (more on GET requests in 2.9: HTTP) to the href address. Often the response to such links will be another HTML file.
Form Tags
1
<form method="POST" action="http://google.com">
2
  <input type="text" name="name"/>
3
  <input type="submit"/>
4
</form>
Copied!
Form tags sent requests to the action address on submit. Form requests are typically HTTP POST requests, which we will understand more in 2.9: HTTP.
Disable Cache
The browser cache is a part of Chrome that stores certain files and records that Chrome has seen and/or downloaded before and thinks it will use again.
In the network tab the file downloads that are cached can be seen in the Size column.
During the course we want to ask the browser to never put anything in the cache while we are working on application code. We can disable the cache with the Disable Cache checkbox. This checkbox should always be checked.
Always check the Disable cache checkbox in the Network tab of the Chrome dev tools.
Exercise
1.Open the Chrome DevTools Network tab.
2.Create and open an HTML file with each of the above tags and see what requests are created in the Network tab.
3.Click the a tag link and observe the HTML in the HTTP response.
4.Go to google.com and inspect (using DevTools) the form for the search bar.
1.Notice that it is still an HTML form.
2.Inspect the request that the browser sends when we submit the form.

2: Backend Basics - Previous

2.7: Internet 101

Next - 2: Backend Basics

2.9: HTTP Requests and Responses

Last modified 2mo ago

Copy link

Contents

Introduction

DevTools Network Tab

HTTP Request Triggers

Typing in Address Bar

HTML Tags Referencing External Resources

Disable Cache

Exercise