Now Prettier is very useful for structuring our code.
Another very useful tool is a tool built into the browser,
into Chrome in this case, but other browsers
have it as well.
I'm talking about the developer tools.
We are a developer or we're becoming a developer,
but we already wrote some code.
So I guess we are a developer. And as a developer,
we often want to, dieback the result of our code.
We want to look into our result and inspect it at runtime.
So we want to have a look at the result in the browser
and look behind the scenes there.
Now we can do this by viewing the page source,
but there, we just see the code we wrote.
Sometimes you want to find out which styles are applied
on an element.
And of course, we can just look into our code to find out
which styles are applied.
But what about the browser default styles
I mentioned before?
If for example, this h1 tag has a bigger size,
a bigger font size than this paragraph,
because it has some browser default styles applied.
And for this,
you can right click on some content and choose inspect.
And if you click there,
this will open up the browser developer tools.
Alternatively, in Chrome,
you can open them with view, developer, developer tools.
Or by using the shortcut, which you see here.
Now there, you got various parts that make up
the developer tools, but for us,
the elements tab here is the important one.
And as a side note,
the developer tools do not look the same across all
browsers, so I do recommend that you also give Chrome a try
if you want to follow along with exactly the set of features
I'm showing here.
In the elements tab, you see your HTML content.
You actually see more than the content,
more elements that we haven't written yet,
but we can ignore them right now.
HTML, head, body, we can ignore it right now.
Instead here we see the h1 and the p element.
And you see if I hover over them,
they get selected on the left.
We can also click on this icon here and then select
the item in the left here, so on our webpage
and it's then selected here on the right.
And why are these tools useful?
Because if we have a look at them,
if we select an element here,
then at the bottom of this screen,
we can see the styles that affect this element.
And here we see the styles we added
directly on the element with this style attribute.
That's the styles we see here,
but we also see some user agent styles here.
And user agent, that's simply our browser.
It's the agent we as a user use to access this website.
And here we see some default styles which are applied
onto this h1 element in this case.
And whilst we haven't learned about all those styles yet,
we see that, for example, there's a font size style
being set, set to a strangely looking value of QM,
which clearly controls the font size of this element.
And being able to inspect your code like this
is very useful because you can see what affects an element.
And especially if your webpage becomes more complex and you
have more and more elements with more and more styles,
being able to look into these dev tools and look into the
styles that affect an element directly on your page
is very convenient.
You can also not just look into your style there,
you can also edit them.
For example, here I can switch text to align to left,
and I get a preview of how this would look like.
And I can also click on this color preview here and actually
pick a different color and see how that looks like.
And if we reload, those changes are gone
because if we play around with styles here,
we don't change our original code.
We just changed the loaded page.
But if we then reload that page thereafter,
we reload the page based on our actual code.
And it is worth pointing out that these developer tools are
not just available on sites you are working on.
You can inspect any website with those dev tools.
So for example, here, I'm on google.com and here,
if I open those dev tools,
I can also inspect elements here on google.com,
this image, for example,
and I can see the styles that affect this image.
And of course we can also change the styles here or add
a brand new style here, if I wanted to.
That's all something we can do.
Now, keep in mind that we're not changing the original code,
so we're not hacking Google here.
We're only changing what was loaded for us.
So we're only hacking ourselves.
And if we change something here and reload,
that will also be gone, any changes we made will be gone.
But these dev tools are a very useful tool for experimenting
and playing around with your own page,
for understanding why certain things look the way they look,
and of course also for exploring other pages,
which you did not build,
maybe to find inspiration or to see how the developers
of that page achieved a certain style.
That being said,
if you do inspect other pages like google.com,
of course at the moment,
you will still see many HTML elements and also CSS
properties you haven't learned about yet,
but that's something we're going to work on
throughout this course.
So the dev tools are another useful tool,
which you should be aware of and which we will use from time
to time in this course,
and that's why I wanted to introduce them early.
Now I will close them for now.
And we are now going to dive back into our code,
but the dev tools and this auto format shortcut,
which you'll learn about,
these are things you should keep in mind.