Optimizing with Browser DevTools

Let's say I want to experiment and change some things about my page. Of course, I can go find the appropriate code to change, whether it's CSS that I want to experiment with or HTML, and I could make some sort of change. I could save my file, come back to my browser, and refresh it.

But having to go back and forth and back and forth to see how those changes are affecting my page can be tedious if you want to experiment with things. So there is a better way. We can use the built-in developer tools in every browser.

So I can right-click here, or CTRL-click if you don't have a right-click on your Mac, or you can do a two-finger click if you're using a trackpad a lot of times. And here I have an inspect. So browsers have these built-in developer tools that we can use, and it opens up the DevTools.

Now in these DevTools, they might not open on the right, they might open on the bottom. A lot of times they do open it over here on the right, and we can change their position if we want to. There's a little menu here that I can use to change their position.

So even if they open up in a different place, we can always change those. I have enough screen space here that I'm going to dock it to the right so that I can see all of my page here as I'm working. And just like if I'm in vs. Code and I want to make my code bigger or smaller, when I click into the DevTools, if I want to make these parts bigger or smaller, I can hit command plus and minus on Windows, CTRL PLUS (+) (+) and minus.

Now just be careful if you click into the webpage, command plus and minus, or on Windows, CTRL PLUS (+) (+) and minus, that will set the zoom level of the page. So I'm going to just reset that back to the normal zoom level because I don't want to zoom in or out on my page. I want to click on the DevTools and zoom in or out with that command plus or minus or CTRL PLUS (+) (+) or minus on Windows.

And I can make these things bigger. We're going to see multiple parts here. We see the code up here, and the code starts being collapsed except for the thing that you have right-clicked on.

So depending on what you right-click on, so let me close these DevTools here. If for example, I right-click on the heading and I say inspect, notice it goes right to that heading and has to expand the things to get to that heading. Again, if I close that, if I let's say right-click on this image, and I say inspect that image, it's going to go right to that image.

Initially when you bring it up, right-click on the thing that you want to see and it will open up directly to it. Now once you have this open, you don't have to keep opening and closing it. You can right-click and inspect again, and that will take you to that.

Or the other thing you can also do is you can use this little pointer. So I can click on that pointer tool and then I can hover over things and notice that it not only gives me a little bit of info right above the thing that I'm hovering over, but also on the right notice that it's showing me the code for that particular thing as I'm hovering over it. So it highlights it both on the left and highlights it on the right as well.

This can get me directly to the thing that I'm looking for. The other thing that I can also do is, of course, I can peruse the page and look at various things, and when I highlight it here, notice it also highlights it over there. So I know that this is the thing that is being highlighted over there.

And it's based on what you're hovering over with your cursor here, not based on what you've clicked on. It's based on what you're hovering over. If I want to, let's say, change some content and change some HTML, if I'm here in the heading, notice that there's some text here.

And let's say I want to change that text. I can double click on the text to make it editable. This is the latest news from The Onion.

And notice how it changes. Now, these changes are not permanent. If I were to reload the page, those changes are going to be gone.

But this is just a way for you to test things out. And you can test out all sorts of things. You can see what it looks like without that element.

I can right-click on it and delete it. Or I can also just click on it and hit backspace or delete on my keyboard as well. And actually there's an extra break and I'm going to delete that.

Now I can see what does it look like with just a single line heading there. So you can change content if you want. You can, let's say, you think that maybe you don't need one of these images.

So I could click on one of those images and hit delete to delete one of those. I can also change CSS as well. So let's say I use my pointer here and I hover over something.

Let's say this heading 2 right there. When I select the heading 2 here in the code, it highlights it over there. But also it shows me the CSS that is relevant.

Instead of showing you all of the CSS down below here, it only shows you the relevant CSS. So instead of heading back over to vs. Code and having to pour through all of your styles, trying to find the applicable ones, when you select an element, it only shows you the CSS for that particular element. Like so.

If I decide I wanted to play with a different color, I can click on here and there's a color picker built in here. So I could experiment and try out some different colors. Should I want to try out a different color there? I can also click into there and type in a color.

If I want that to be red, I can type in red. Or again, click on here and decide, no, I actually want that to be this kind of blue color right there. I can also experiment with font sizes or any sort of number that's here.

If I want to type in a number, of course, I could type in a number and it previews it as I do so. But what's even more kind of easy to experiment with, I can just click into that number and I can use my up or down arrow keys to increase or decrease that by one. Now, the up and down arrow keys increase it by one.

If I do shift arrows, that increases it by 10. So I go in bigger increments. So this lets you experiment with things.

Now, if you already have been given a specific design, of course, you could be just implementing that exact design. But if you want to go back and tweak things and change things and experiment, this can be a really nice way of doing so. For example, if I go to the div wrapper here and I maybe wanted to experiment with a wider width, I can click into that width and hitting individual arrows, just up and down arrow, going one pixel at a time, that's going to take a long time to get there.

So I'm going to do shift up arrow and that gets wider much quicker. Again, I can, of course, type in a size. So I can type in 700 as well.

And I could experiment with the background color. Now, not only can I change it here, but I could see what it would look like without that code. So I can turn that code off and disable the code.

And it kind of crosses it off and says, OK, that code is no longer applicable. It's not being applied anymore. And I could see, oh, yeah, I really do need that background color.

Maybe I want to experiment with the padding. Now, notice with padding, when I hover over it, notice the green coloring that's being shown. So this is showing some of that box model, which I mentioned before, the box model being this.

So here I was in styles. Here I'm in computed here. And notice that we have the border.

And inside the border, you have padding. And that padding is highlighted in green. And outside that, you have margin, which is highlighted in this orange color.

And then here is the border. Now, my border is quite small. So I'm going to go back to styles.

And let's say I go to my border and I click into there. And I click into that thickness value and I hit my up and down arrows. I'm going to hit my up arrow here to increase that.

And then maybe I think that that color is not appropriate. So I can click on that color and change that, maybe make it make it a bit more pronounced, something like that. And maybe I don't like the solid and I want to try something else.

So I try dotted, for example. And then I'm like, oh, no, maybe that's not good. Dashed.

No, not very good. Now, let's say you don't know all of the different options for a border. And maybe you don't remember the longhand version of this.

If I open this up, this is the shorthand version of this. And when I open up, this gives you all of the longhand version of this. So this is border top style, border right style, border bottom style, meaning the different you could have different styles on different sides, which would look very hideous, I'm sure.

But here this is border style. So maybe you forgot that this was border style here in the middle. I could look up and say CSS border style and see what are my different options here for border style.

And one place you can do that is the W3Schools and they list those different ones there. Or I can check out the MDN, Mozilla Developer Network. And this is the makers of Firefox.

What's nice here is you get this little interactive thing. So you can see these and here you can see different ones around the different sides. And actually, I like this double one that's there.

I want that double one. And they go through and, of course, they give the different ones. I like the double.

So let me try the double one. Double. Yeah, maybe that's maybe that's more to my liking.

Point being, you can experiment. Now, if you do like these changes, you will have to copy the changes that you made and then head back over to your vs. code. And I was doing the wrapper border here.

So I would have to paste that in because what you do in the browser here is not going to be remembered once I hit refresh. If I save that change in vs. code and then hit refresh, that change is kept. But all the other changes would be lost because I did not make those.

One thing that helps you to find things that you're looking for that maybe you're like, I don't really know, like what's creating this space here? I didn't add that space. And I thought that when I created this wrapper here that I said to have a consistent 40 pixels of padding. And when we look at that green, it is an even amount of green space there.

That's indicating the padding. Right. And if you forget the coloring here, you can see here we do have an even 40 pixels all the way around.

But yet above that text and see when I highlight the text, there seems to be some sort of mysterious space above that text. And the dev tools can help you to find those kind of things. You have to be a little bit of a detective.

I call it being a data detective. So you got to poke around and look around. And oh, as I'm hovering over this heading, notice that heading shows some margin.

And when I click on things, it'll highlight it down here. So hovering shows you the colors. And sometimes that's just a quick way of finding like what has the space that you're looking for, whether it's padding, whether it's margin.

You don't have to necessarily know you're just looking for some green or some orange somewhere. The blue is the content area. So that's the content size.

And so when I look at the heading, I can click on it and I can see, oh, yeah, there's some margin on the top and margin on the bottom. Now, you might say, well, but I didn't add that. And you're correct.

There are many defaults that the web browser gives you that are not necessarily things that you created. There's a built in user agent style sheet. And you can see this here, user agent style sheet.

And so they have a built in style sheet in the browser that defines all of those settings. The default font, the default size, the default color, the default background color, all of those are predefined. But our styles that we create can override those things when we don't like it.

So even though there is some top margin on this and some bottom, in this case, I don't want the top margin. Now, I can actually experiment with double clicking on this number here and typing in zero to get rid of it. And oh, look at that.

With that removed, there is no longer any additional space up above that heading. So I want to say that for heading ones, I want there to be margin top zero. So I don't want any margin on the top.

So I'm going to go back and I'm going to find that heading one rule here. And I'm going to say margin top zero. You don't have to say zero px for pixels or anything.

Zero is zero. It doesn't matter. Zero inches, zero pixels.

Nothing is nothing. It doesn't matter what kind of how you're measuring nothing. It's always nothing.

So you can just say zero for that. I'm going to save that change, come back and hit refresh. And of course, that is now kept because I made that change.

So the dev tools can really help you sometimes to find spaces that you're not sure where do they come from. And they can be really useful for experimenting with things. Also, if you've gotten a page from someone else and you're trying to understand it better, instead of having to just look through all of the code here and not seeing a preview next to it, it could be really nice to open up the dev tools and just kind of poke around and be that kind of data detective and highlight things and see, OK, so that that's that's a heading two.

So I've got a heading one. I've got some heading twos. I've got some paragraphs.

So there's an author class. And you can really get to know a page that somebody else created much quicker. Also, these things are collapsed, so they don't take up as much space.

They don't take as long to scroll through. So it can be a really nice way to get to know a page or become reacquainted with a page that maybe you coded months ago or maybe even a couple of years ago. And you've since forgotten what you coded since you last did that.

So it can be a great way to get reacquainted with those things. So the dev tools are very useful. You know, again, you can move them to the bottom if you want to.

If you are on a smaller screen and you need the width here, in this case, they just kind of reconfigure themselves here. So, again, you have your styles over here on the right and the computed here for this part here. But put them wherever you see fit.

Also, another nice thing about the dev tools as well, when you open them up, is you can create a narrower screen area for your page. What I mean by that is if I close the dev tools up, I can only get so small with my browser window. It doesn't allow me to get any smaller than that.

And that might not be actually a good simulation of a small device like, let's say, a phone. So here on my desktop here, I can make this wider. I can go into the inspect and I can actually make this much, much more narrow.

In fact, so narrow that's even well beyond a phone. And actually, as I resize, you'll notice it actually says, oh, look at this. This here is the width of this screen area.

It only does it as you're resizing and then it goes away. But let's say, you know, a phone maybe is about 350 pixels or so. So you can get down to about 350 pixels, which I could never get that small if I was on a just without the dev tools.

Right. I can't get that small like so. So that is also useful.

Later, we'll actually come back and we'll actually see there is a mobile preview. But for right now, I'm just going to leave that turned off and just resize this area here. And you can see how it reflows to be good across various different screen sizes.

Right. So it can still work across different screen sizes. Now, let's say you are then done with your page and you want a second set of eyes to just double check your code and make sure that you didn't put in any errors.

Just because a page works does not mean that you haven't made a mistake. It is possible for you to make a mistake and still have the page render what you think is OK. HTML is very, very, very forgiving.

Its whole approach is if it doesn't understand something, it will just ignore that tag. So let's say you did some new tag. And the idea is that as web browsers update, they get new features.

But older web browsers, let's say somebody does not update their browser. It would not, that old browser would not understand a new tag. So let's say some new tag comes out.

For example, many years ago, there were no video tags or audio tags. And we had to have special plugins like RealPlayer and Windows Media Player and Flash and different plugins to view videos. But HTML5 added the video and audio tags.

So with those new tags, older browsers didn't understand what those tags were. A lot of programming languages are built that when they see a tag, if they didn't understand that tag or that code, they would just error out and say, no, I'm done. I'm out.

I don't know how to proceed. HTML says, if I don't understand something, I will just ignore it and skip past it. I will not execute that code, but I also won't have a problem with it.

So it's forgiving by its nature. And that's actually how the web can innovate and move forward without breaking websites that we built in the past, which is really important to make our web pages always work. Kind of forever on, which is great, but also means that if you make a mistake, it doesn't necessarily complain about that.

We can either select all of our code and copy it to put it into what's called an HTML validator, or we can also just upload into an HTML validator. So in your exercise, we'll give you a direct link to this, but you could just simply Google HTML validator. And you come across this one by the W3C.

The W3C is the World Wide Web Consortium. That is a group that used to define the web standards, and they have since kind of lost that. We'll have more about that in a later video.

But they have a good validation service here where I can either copy and paste directly in here, or I can upload files if I want to. I'm going to use the file upload. It's going to choose, and I'm going to go into my news website and upload this index page here that I've been working on.

I'm going to hit check. In this case, you get the green light, says there was no errors. But what would it look like if you did have some errors? So let's say, for example, I, let's say, do something like that.

OK, so that's an issue here. And as far as how that would look, let's preview this in the browser here. And so it does.

Do I have this? Yeah, so see how here it kind of ate this up and said, oh, well, that's no longer there. And it does in vs. Code kind of give me the red angry indicator there of like, hey, you made a mistake there. So whenever you see that, that's kind of an indication that, hey, you should look somewhere either on that or just before.

If you see a red error like this, there's no actual error here. So you know that something prior to that was creating that issue. Something down below does not mess up something up above.

HTML starts rendering from the top. It goes line by line by line. So it works down.

So there's no way that an error down here can mess up something up above it. But this we kind of went off the rails and kind of got off track. This thinks that it's part of that because we never close that tag.

So it thinks it's part of the tag, gets confused when it sees another tag it understands and just assumes that that's some tag that it doesn't understand. So it just ignores that part and then trudges on. And then that's why it only broke part of the page.

But let's say you didn't notice that. So I'm going to save that page, come back to the browser here, and I'm going to just reload that file here. And now notice there's all sorts of errors here.

And it looks like, oh, my goodness, it's so bad. Now you and I know that we just made one mistake. But this is what happens when it looks like a cascade of errors.

But just take the first error. Don't worry about all the rest and just fix it one error at a time. And so it says that there's this in an attribute name, probable cause that this is missing immediately before.

So they're sensing like, hey, wait a minute, there's something wrong around here. And they're saying line 49 and they're showing here the heading one. And so they're saying that there's an error there and it's the probable cause of something missing right before it.

So looking on line 49 here, then I backtrack and well, there's nothing that I'm missing here. But yes, they are actually correct. And just fixing that one error, if I go back and recheck this, look at that.

Now all the errors are gone. So don't freak out when you see a lot of errors. It doesn't actually mean that there's necessarily a lot of errors.

And always start with the first error. And then that could potentially fix a lot of them. It just it often gets confused when there's one error and then it looks like there's many other errors.

So just top down work one error at a time. And sometimes fixing one thing will fix a tremendous amount of other things. But you always want to run this validator on everything that you do when you're finished.

Just because even though it might display fine in the browser, you might have missed things that behind the scenes actually weren't working properly. And that's important not only to make sure that everything works well, but also for search engine ranking. Google, if they see errors in your code, they think you're not a very good developer.

And that kind of reflects poorly on your websites. There are many factors that are good signals to Google. One of them being proper coding.

Improper coding just says, hey, you know, we're sloppy. We don't know what we're doing. And you know, it's like when you're driving down a road and you see many houses and some of them are built well.

And some of them are not built well. Are you going to send people into the houses that are not built well? No. If it looks like it's falling down and there's problems and errors, Google's not going to want to send people to that website.

If they can send somebody to another website that is built properly, that does have good coding. So that is just one of the many things that we like to do to make sure that we rank higher on Google. There's many different signals.

I'm not saying that this is a huge one, but we always want to make sure that we're doing right code. And the validator can help you in double checking your code. All right.

So go ahead and do exercise 2D so you can put this into practice.