Developer Tools in the Internet browser Chrome (or shorter, DevTools) is a set of tools that mostly serve developers to remove bugs on websites. These tools enable access to the inside of browsers and web applications they are testing and trying to improve.

HOW TO APPROACH DEVTOOLS?

Very easy! In the Chrome browser, click in the right corner of the Chrome menu, and then click More Tools> Developer Tools.

When you right-click on any item on the page of the desired site, you will see a drop-down menu where you need to click Inspect Element, and there it is!

At the bottom of the page, DevTools will open.

You can achieve the same effect if you press alt + cmd + I on the keyboard, then right-click on any item on the page and select> Inspect Element in the menu.

When you open DevTools for the first time, everything can work on you somehow stuffed and overloaded, and it will be best, to begin with, a couple of windows where you can change CSS styles and HTML. The left window shows the source HTML code in which you can move, edit, and delete parts of HTML, while the right window displays information about changing the style.

To begin, learn keyboard shortcuts that will make life easier for you and further programming.

STYLE PANE

The Style Pane window contains all the CSS styles that apply to the currently highlighted item. Insert the element by Inspect Element; if you do it in some other way, the tag body will be marked.

The styles you can apply to an item are:

ORDER OF APPLICATION

CSS rules that you look at are sorted out based on the specificity of the styles, which is very useful because it is clearly seen which rules are passed by some other rules. In the extreme case, when you notice that style has not been applied, you can check here that it is by chance not overtaken by another, more important rule.

COLOR PICKER

When it comes to colors, the window for changing styles displays a window with the corresponding color. Clicking on it will open a window in which you will be able to adjust the transparency (opacity). If you want all the colors in the window to be aligned, just click on a specific color within the window, mark it and it will be automatically applied.

ENABLE/DISABLE

When you move your mouse over CSS rules, the Internet browser shows the fields next to the styles. You can mark or enable styles (enable/disable), which will be much easier than removing the style and then you try to remember how it looked.

IN-PLACE EDITING

DevTools has the ability to in-place editing, which means that when you click on a rule, it will be highlighted and you will be able to change any part of it, and at the same time you will see the new CSS rule that you are applying.

ADD NEW RULES

To add a new rule, click on the plus icon (+) in the upper left part of the stylesheet. When the set of rules appears, the selector or rule can be changed as you wish.

MAP TO SOURCE

For each set of CSS rules, the filename will appear in the upper right corner (eg base.css) that tells where the rule is defined and where you can make changes. This name is actually a link that links the file itself to the DevTools tool, in which you can modify this policy.

THE BOX MODEL

When you open the stylesheet, the item will be displayed in the margin, boundaries, and fill information box. By checking the visual view, you will make sure that space is good, and double-click to edit the changes in the way they should look.

OPTION SHOW INHERITED PROPERTIES

Below the above-mentioned model is the section in which the sum of all CSS rules for the given element is listed. Clicking on Show Inherited Properties will display rules that are not transferred from the default mode. This option can be helpful if you want to find where the item you are testing actually pulls its values.

DEVICE MODE

Another useful option is the option to simulate mobile devices, which you launch by clicking on the icon of the phone located in the upper left corner. With the development of mobile devices and a growing demand for responsive design, this option has become one of the most useful. Clicking on the icon opens a window where you can change the type of device (Device), as well as the speed of the Internet (Network), or the type of internet browser (Mozilla, Chrome, Safari).

What needs to be emphasized is that this option is just a simulator - that is, it does not show how really different devices will run the site you are testing, and the right testing should be done on the actual device.
If this article has been useful to you, you can find similar tips on the official Google Chrome DevTools page.

Follow me on Twitter - @SrdjanKali.