When you design a site, it's vital we catch errors in time or understand how to properly convert the block we need. The more experienced you become, the more information you need to know about the site. This can be data on the network load, the weight of the site, and loaded images and scripts. All this allows you to control the operation of the site and, if necessary, to optimize it.
Previously this was done manually or using a variety of programs. The layout had to be written directly to the file, and only after saving would the result be checked. This is time-consuming because you can't track changes in real time and immediately see the changes you make straight away.
All modern browsers now have a web inspector function (developer tools). This is a set of different applications and inspectors, using which you can add styles and HTML code elements without changing the files. These web inspectors allow you to test the layout on different screen resolutions, which is essential when creating adaptive websites. This topic will be dealt with in more detail in the corresponding course.
In this lesson, we'll explore the basics of working with Chrome DevTools, which is built into the Google Chrome browser. The principles that'll be shown will also apply to inspectors in other browsers. They're all similar, so you shouldn't have any problems going from browser to browser.
There are two ways to open Chrome DevTools:
After opening it, you'll initially be taken to the Elements tab. This is the most important tab for beginners. The other tabs also carry a lot of useful information, but at this stage they're more likely to cause problems for you because they're quite specific. But let's briefly describe the purpose of each of the main tabs:
You'll use these four tabs fairly regularly when you have an actual programming job. Progress does not stand still, and it's important to keep track of more and more different information about how the site operates.
Let's go back to the Elements tab. Conventionally, it's divided into two large groups - HTML work and CSS work. The HTML area is represented as follows:
Open the panel on this page and try to expand the HTML tree. You'll see that all nested blocks are separated from each other by indents, which is very convenient because you can visually see the depth of the required block. If you click on any HTML, you'll see all the nesting with classes in the information line at the very bottom.
In the picture above, this nesting is as follows:
html body.min-vh-100 div.mb-n5 div.row.no-gutters div.col-sm.overflow-hidden div.my-4
It bears some similarity to a CSS selector. In fact, that's exactly what it is. If you give this line as a CSS selector, you'll select exactly the element you selected in the inspector. From the same information, it's easy to reproduce the structure of the blocks. In this case, it's like this:
<html> <body class="min-vh-100"> <div class="mb-n5"> <div class="row no-gutters"> <div class="col-sm overflow-hidden"> <div class="my-4">And here is our chosen block :)</div> </div> </div> </div> </body> </html>
Open the context menu (right-click) on any HTML element in the Web Inspector. You'll see all possible actions on a particular HTML element.
Let's take a look at the main points:
Note that none of these actions affect the markup files; they're on your computer or server. These manipulations are only available here and now. When the page is refreshed, all these changes will disappear. This allows you to quickly run experiments and see them in a real browser without having to edit working files.
The second area in the Elements tab relates to CSS.
This is a fairly large area with various tabs. We're interested in the first two tabs:
First, let's look at the basics of the Styles tab. Outwardly, it looks as follows:
And that part can be broken down into several. Of course, it sounds complicated, but it's actually quite intuitive. In the top area, you'll see the styles that are directly applied to the current element. In our case, that's are the following properties:
These 4 properties with tag or class selectors are directly related to the selected block. The tool shows not only the properties, but also the selectors to which those properties apply. Thus, it's easy enough to find the right place in the CSS file. In addition, to the right of each selector is the file in which the selector is located and the line number in the file. This is convenient, provided that you don't use plugins that compress CSS to one line. In that case, this information may not help you.
Below these selectors, you can see the block Inherited from ... - In the example above, the styles are inherited from the
body.min-vh-100 selector. At the same time, they highlight those styles that directly affect the element. The rest of the pale color styles are not inherited.
In this tab, we can not only look at the styles, but, as with HTML, we can also edit/add/delete styles. Try clicking on any value in this tab and the web inspector will prompt you to change it. It will also prompt you for available default values, which is very handy if you have forgotten a value.
Now let's switch to the Computed tab. It looks as follows:
And it's divided into several main areas. This is the last one, promise :)
At the top, you'll see a visual representation of the block model of the selected item. It contains all the properties that affect the final size of our element.Let's remember them:
margin- external indent
padding- internal indent
If you look at the example in this tutorial, you can see that the element now has a height and width, as well as a
margin property of 24 pixels above and below.
The bottom area illustrates the principle of cascading in CSS. Here you can see a compilation of all the element styles. You can click on each property, and it'll give you the file and the line where the properties were applied to the element, and which selector added which property.
These are all the most basic things about Chrome DevTools that you should know at the beginning. If you try and write down all the possibilities, then you could make up an entire profession. Web inspectors are very powerful tools that are sure to help you at any stage of your development. It's also an indispensable assistant in real work. Always try to learn something new about these tools.
Open the Web Inspector available to you on this page. Try going through the different tabs and see what information they carry. Change the HTML elements. Add different properties to the current page.
The Hexlet support team or other students will answer you.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.