- The Browser as a GUI for HTTP 1:52
- Intro to Chrome Developer Tools 7:07
- HTML Review and URIs vs URLs 3:47
- URIs vs URLs 1 question
- Using Anchors for GET Requests 4:18
- Using Anchors for GET Requests 1 question
- Using Forms for GET Requests 8:44
- Data in POST Requests 1 question
- Using Forms for POST Requests 8:32
- Using Forms for HTTP Requests 2 questions
- Wrap-Up 0:53
Preview
Video Player
00:00
00:00
Intro to Chrome Developer Tools
7:07All modern desktop web browsers have a set of tools that allow a person to examine the inner gears of browser requests and responses. In this video, I'll introduce you to the Chrome Developer Tools and how we can use them to see HTTP in action within the browser.
The typical scenario in which HTTP is used
is in the communication between a web
0:00
browser and a web server.
0:04
Well, let's see how we can
get a direct look at HTTP
0:06
using the developer
tools of Google Chrome.
0:09
I'd like to show you how to use Chrome
to take a look at HTTP requests and
0:14
responses.
0:17
Now, typically you'll use a browser
to simply interact with the website
0:18
clicking on its links, filling out its
forms, watching its crazy cat videos.
0:22
As a developer though we can
use a whole suite of features
0:27
offered by the Chrome developer tools to
take a look under the hood of the browser.
0:30
Also, know that other modern browsers
offer similar functionality,
0:34
though it may look and work a bit
differently than what I am showing here.
0:37
So, in Chrome, to view the developer tools
on a Mac you can use Command Option I or
0:41
you can use F12 on Windows.
0:47
This should bring up a lower panel where
you can examine the browser hard at work.
0:49
Let's navigate to a site to take
a look at what's happening.
0:54
I have an idea, let's go httpbin.org.
0:57
When you get there, scroll down a bit
til you see the link for /HTML, and
1:03
go ahead and click on that link.
1:08
What comes up is simply a heading
element followed by a long paragraph.
1:11
Down in the developer tools here.
1:17
Let's check out a couple of these
tabs to see what your options are.
1:19
First, if you click on Console,
you'll see JavaScript errors in here,
1:22
debugging messages as well as a live
JavaScript console into which you can
1:26
type whatever JavaScript
commands you like.
1:30
This can be extremely valuable as
a front-end developer trying to debug your
1:37
JavaScript.
1:42
Let me dismiss this and
if I click on elements,
1:43
I'll see the entire HTML structure of
the site or DOM tree as its called.
1:47
Stands for Document Object Model.
1:53
You can click on elements to
see the CSS that's attached to
1:56
each of the elements and
2:00
even event listeners of JavaScript that
are attached to the elements themselves.
2:02
This site doesn't have any JavaScript so
there are no event listeners.
2:07
You can even manipulate the HTML in
CSS to preview changes before making
2:11
them permanent in your
application code on the server.
2:15
This is a nice tool for
testing changes you're about to make.
2:19
Then upon refreshing, the page reloaded
and your changes will be lost.
2:23
Though there are some other tabs here that
I encourage you to explore on your own,
2:28
let's head to the one we're going
to focus on, the network tab.
2:32
I'm going to pull this up to give
myself a little more room, and
2:37
I'm gonna make sure each one of
these icons is gray instead of blue.
2:39
So if yours are blue, go ahead and
click them till they turn gray.
2:46
What you'll see here is a list of
all the request that have been made
2:50
as a result of this request to /HTML.
2:54
Now my list consists of
a whole one item here.
2:58
And clicking on that item we'll reveal the
details of the HTTP request and response.
3:02
In this panel over here,
the general section shows you the full
3:09
URL that was use to make the request,
the request method that was in HTTP
3:14
request as well as a response code
with a nice little color indicator
3:18
in this case saying that that was
successfully processed on the server.
3:23
In addition I see the remote IP address.
3:28
Remember this is
the Internet Protocol address
3:31
of the server that HTTPbin.org exists on.
3:36
Now I'm going to keep these first
two sections here collapsed and
3:41
let's focus now on this third
section of the request headers.
3:44
When you expand request headers,
you have an option to view the source.
3:48
Currently what you're seeing is a
formatted version of the request headers,
3:52
but if you click view source,
you'll see an unformatted or
3:55
raw version of the request headers
that were sent in this HTTP request.
3:59
These should look familiar to you.
4:05
These are the same headers that we saw
in the HTTP request we were making
4:07
from Telnet,
whether you were doing it in a workspace,
4:12
on Treehouse, or you were doing it from
your own terminal on your local machine.
4:16
So taking a look at
the details of this request,
4:22
we can see some of the stuff that
we've already become familiar with.
4:24
The request method here is GET.
4:27
We're requesting the resource
located at the URI/HTML
4:29
using protocol HTTP version 1.1.
4:34
Remember we again list the Host in
the HTTP request itself of httpbin.org.
4:38
Now there are a bunch more
headers that we're not going to
4:46
talk about specifically, but
let me point out one new one here.
4:48
And that new one is the User-Agent.
4:51
You see see this long
sequence of characters
4:54
that amounts to what's called
the User-Agent string.
4:57
This is an identifier for
the client that's making this request.
5:02
Now you might think, we're not in Mozilla.
5:06
We are not in Safari.
5:08
We are in Google Chrome though so
you'll see the version of Chrome and
5:10
there it is Chrome right there
version 48.0.blah blah blah blah blah.
5:15
That is the user agent
that tells the web server
5:20
the exact version of the client
that's making the request.
5:24
Let's now jump to
the Response Headers section.
5:28
So, I'll collapse Request Headers and
expand Response Headers.
5:31
If you click on view source here, you'll
see a similar layout of information,
5:36
even if the info itself is different.
5:40
The first line shows the status of
the response, which in this case,
5:42
was status 200,
which translates to the message OK.
5:47
Here we are Server Header that indicates
the type of Server that processed our
5:51
request and sent a response and
in this case that was nginx.
5:55
Also notice
the Content- Length Header of 3741.
6:01
Remember that’s the number of bytes
that’s contained in the response body or
6:06
payload itself.
6:12
Speaking of that payload, in Chrome where
you will see that is in the response.
6:14
And because this response contained HTML,
6:19
you'll see the payload itself
is what contained that HTML.
6:23
Now spend some time exploring
the details of requests and
6:27
responses and
how they look on different websites.
6:31
Again, remember that when you navigate
to a less plain site, let's say,
6:33
stackoverflow.com.
6:38
You'll see a whole host of requests
if you haven't filtered them.
6:41
Your list will be much longer than one.
6:45
You could simply scroll up to the top
to get the original document that was
6:47
requested, or again, you could use this
filtering option to choose doc and
6:51
see only that initial document that was
requested, and then check out the details
6:55
of the Response Headers, the Request
Headers, and anything else you like.
7:02