Python for Entrepreneurs Transcripts
Chapter: Web design foundations
Lecture: Browser Dev Tools
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
We played a little bit with the dev tools in the browser now it's time to actually focus on them a little more deeply.
0:08
Now, notice in this particular example I'm using Firefox, the other browser I use all the time is Chrome, and almost every browser,
0:16
every major browser has some form of dev tools in it and they are quite similar in a lot of ways but they all have some unique thing to them,
0:25
what you see here might not be exactly what you have in Chrome and so on, but they are all really good and the idea is what is more important here is
0:32
you have these tools available to help you, let's use some of those tools on this page. So we come over here, there is several ways you can get to it,
0:40
you've got tools, developer tools, I find this often easiest to just right-click and say "inspect element" and that will pull up the tools,
0:45
right now I have them in this separate page here and you can see, let's scroll through this page for a minute here.
0:51
In Firefox they have this cool thing where you can go into inspector mode and then click this and say I want to know what that is, or this or this,
1:00
and click that, and then you come back, you can see it's selected the various things and also as you move around here,
1:06
so you can always move around here but sometimes you are like "I want to know what is that", and so you select it and there it is,
1:14
now, you can even do things like you can change the content, so this says 7.2 hours, maybe you guys think that's too long,
1:21
so you come over here make that 5 hours and change it. Or you could change this hyperlink or you can go and edit this,
1:28
if you want to edit a big block, you can actually come down here and say edit,
1:31
and you actually get in here and like rewrite the HTML when you click out, it regenerates whatever it is going to be on the DOM there.
1:37
All right, that's cool, let's go back to this subtext thing. You can see all the CSS styles over here, like you can see the subtext here,
1:44
I'll hover it here I'll show you exactly where it is, see how it's centered in the page,
1:48
and that's because we have top-courses.pitch and it has "text-align: center".
1:52
But we can toggle these on and off, I can change it here if I want the color to be yellow,
1:57
I can change it here and notice, it's just this little tiny bit there. Oh here we go, we are messing with this one down here,
2:04
let's move this a little to the side here. So when I was tweaking with it, it ended up over here,
2:09
so we can do things like change the color, turn it on and off, and so on, and this lets you explore the design parts of this page like, let's go up
2:18
and we can find the pictures, so like here is the image and we can say you know what, what if I just want the width of this image
2:25
or what it would look like if it's a 150 pixels. And you can just set it and tweak it here. So this is really cool for the design.
2:30
We also have a console, which is basically just a JavaScript console and so you can do anything that you would normally do,
2:36
like if I want to find all the images, on the page, I can give it the CSS selector, and you can see it came back with five images,
2:43
we could even do a little function on it, we could log out what we have in on images.
2:48
If I run this, you can see actually those are all the images on the page, whatever JavaScript you want to run, you can do this here.
2:53
This is also important for showing you errors, like if there is a JavaScript error on the page or if there is like a 404 or 500,
3:00
you'll often see them show up down here as well; all right, so this is cool.
3:03
And like here you can see the various things we have it turned on for, right, we could show errors and warnings for JavaScript or less, yeah.
3:11
Pretty remarkable that actually the print in the console still lets you go back
3:15
and select these in the DOM, I haven't realized that before, this is pretty amazing. Ok, we can go to the style editor and do some styles here
3:22
and kind of tweak it in a more permanent way that may poke in at the DOM, you can do profiling, we are not going to do that,
3:28
you can check out what's going on at the network, this is pretty interesting, so let me change the size here a little,
3:35
like this, so we can still see it going, let's say I only want to pay attention to just the document for now,
3:40
so just this, we have the courses/all and you can actually see the response time,
3:44
the server is pretty far away from me, it's on the East Coast of the US, I figure that is kind of half way between the US and Europe
3:51
and it makes everyone more or less happy, but I'm on the West Coast, so like the ping time is a 100 milliseconds,
3:56
just to get there, so this is pretty good response time, we can come down here and view like a particular page, 140 milliseconds.
4:03
We can also see things about the CSS, and we can see things about JavaScript, we can see things about images.
4:09
One thing to notice, we talked about the caching and cache busting, so notice this here bootstrap.min, that's a cache id, font-awesome...cache_id,
4:16
all these things, here notice, out of the cache, out of the cache, so there is quite a few requests going back to this page,
4:24
get me these images, get me these style sheets, get me these fonts, but we've only made one request to the server,
4:30
and that's for the main content and everything else is cached, so that's really cool. Few more things we can look at, we can jump between various pages
4:38
if you have like frames there, if we click this, you can actually put this into like a responsive design mode
4:45
so here I can like make sure that my little drop-downs are working good, you can set the size to be various things
4:52
like you want to test what it looks like if say it's on a tablet, or if I want to test what it looks like if it's in various ways,
4:57
and even go into like a touch mode here. I want to show you another one that looks kind of flashy
5:03
and you might be like "oh that's kind of a cool gimmick", but it can actually be pretty helpful in helping you understand
5:10
how pages are laid out, especially if you want to go look at someone else's design and say "how do they do that?". It's this thing called Tilt 3D
5:16
so let's go over here to tools, web developer and I've installed it, it's add-on, I'll show you where it is in a moment and click this,
5:23
and it gives us a 3 dimensional stacked view of the web page, you can kind of see like it looks like that standing out on top of that
5:30
which is standing on top of this, it gives you a view over here on the left,
5:33
that's pretty cool, the real thing is that's cool as when you grab it in the middle and you rotate it like this, and you turn it around like so.
5:41
And say "I want to look over on this side, let's look over here, and I want to know like what is this thing that contains both
5:51
the image and this logo up here." So I can click on this and actually double click it and it will pull this up
5:58
and it will say that's the navbar brand top nav image, here is the actual content.
6:03
Or you can say you know, what is this thing down here, containing this, oh I see, that's a form control, which is input,
6:11
you can see this is your email address. All right, so you can get actually a pretty interesting view
6:16
by looking around and going "OK, I want to try to understand what are the building blocks of this piece,
6:22
how do they put that together", and you could do that pretty well with this Tilt 3D thing, and you get it for Firefox over here at addon/tilt.
6:32
One of the things to notice, that's pretty cool, like if I come over here back to this Tilt thing, notice when I pull it up,
6:37
it has, it was looking like this before, when I pull it up, you can actually go up here and pull out other things on it as well,
6:43
so I can come over here and say "show me just the HTML" or "show me the CSS that applies to it", or "show me the attributes that are set on it",
6:51
so this is pretty cool for exploring things, so I recommend you check it out.