(upbeat music)
- [Instructor] I'm going to explore some data on the web,
and sometimes you need to actually open up the network tab
and start recording
and listening for those HTTP requests
before you actually open the site,
just to make sure you get everything.
So I've got a brand new tab here
and I'm going to start by
opening those developer tools.
There are lots of different ways to open the developer
tools, but remember,
one of the most straight forward is just to right click
anywhere on the web page
and click inspect on the menu.
And that's going to open up your developer tools.
I've made mine a little bigger.
You can just move the pointer over the top edge.
And when it turns into that double-headed arrow,
you can stretch that up,
make it as big or small as you want.
And then I want to go over to the network tab,
and I'm not worried about checking on this page,
but now that I have this open,
I want to go up to my address bar
and I'm going to go L O U V R E dot F R.
And now as the webpage loads for the first time I'm getting
everything, I'm getting all the requests.
And so there's all the requests I need to go ahead
and deal with their cookie policy.
So this includes all of the images, all of the JavaScript,
all of the HTML, the fonts, everything that's
coming on this page,
there's an HTTP request for it.
What we want to look at is the XHR requests
and that's the data.
So I'm going to go over here and click XHR
and all I've got right now is a CSS file.
So let's keep looking.
I'm going to try the explore tab,
and now I can see that I have one JSON type here.
So I'm going to go ahead and click this file.
Actually, I don't want to click that link.
I'm just going to click this entire line
and over here on the right,
I can see some information about the request.
So these are the HTTP headers HTTP status,
and I'm going to go over here to response to actually see
what came in.
So it's labeled as JSON.
And if I start looking through it,
I can see first off,
everything's surrounded by square brackets.
So it's an array.
And within the array,
we've got curly brackets.
So those are objects.
So it's an array that's full of objects.
And it looks like we've got elements of the menu
items that are on the page,
got some uncoded content,
and that may be just images or icons.
And so we can see that some of the things we can see
in the JSON are on the page itself.
And so this is just one instance where we can actually look
at the JSON that's coming in
and see that it's rendered on
the webpage can also check the what's on tab.
And there, I just got another JSON package.
So I'll go ahead
and check that out.
So we can see, we have a little menu here.
There's something about news
and programming and that's right here.
And then this image object is actually encoded
within the JSON.
We've got something on exhibitions and that's right there.
So all of this content is coming through as JSON
and being rendered into the webpage.
So again, when you're exploring the Lourve website
and a lot of other websites behind the scenes,
JSON is coming in
and it's responsible for the content you're seeing.
So JSON is super important on the web
and you can do this anywhere.
You go on any website, you can explore and see.
Not every website's going to be
based on JSON coming through to the frontend,
but a lot of them will.