Right side of the Elements tab

Styles

When you have the element selected, styles and other sub-tabs appear on the right-hand side. In this section, we will dive into it, ensuring you fully understand the language that Chrome is speaking.

:hov — after expanding :hov you can activate such a state as hover or focus; the same functionality is available in the DOM tree

.cls — adds class to the selected HTML element, very useful when you are saving your changes live

+ — adds a rule to the element you are editing, useful when you create DOM without styles yet

Styles — inside, you can find styles adequate to your element.

Colour and text decoration meaning

The yellow warning sign means that you made some kind of mistake when typing the style name or value.

Crossed styles are overwritten by more important styles.

Styles with a gray background are active but not editable. They are native and coming from the browser itself.

On the right, you can see some gray words — the file which is continuing the style rule (w3.css:28) is the place where you can find this style in the computer or server. By clicking on this, you can open that style in source and see where it is.

Computed — styles

The rectangle on top contains values for padding, border and margin.

For non-statically positioned elements top, right, bottom and left properties will be displayed additionally. All values can be modified by double clicking the left mouse button.

Below the rectangle, there is a list of rules that are rendered on the screen and ignores any other. When the arrow on the left is pointing down and the style in extended, you can find the style sheet name as a link (blue link).

Styles in computed tabs aren’t editable, but you can go into styles by clicking the gray arrow.

Event Listeners

In this tab, all event listeners are visible. Let’s start with the option bar on the top.

Refresh sign on the left — refreshes state of your active event listeners.

Ancestors checkbox — show/hide listeners bound to selected element ancestors.

All/Blocking/Passive drop down — you can choose between those:

Passive events listeners — an emerging web standard, new feature shipped in Chrome 51 that provide a major potential boost to scroll performance. Chrome Release Notes.

Blocking — typical old fashioned event listeners.

Framework listeners — this one checks and resolves event listeners which come from frameworks. When it is checked we won’t see jquery as the link, but instead a place where we called a function.

Everyday use

The Event Listeners tab is useful when you encounter code that is new for you. It helps you find the name of a function bound to an element (look at the example below). “Show function definition” will take you directly into the bound function in Source tab.

When you are appending elements with “for” loop, it might happen that you bind more than one function to an element, or do a new binding with every loop. This tab helps you find such bugs.

JSDiddle from the previous section will be just fine to practice with Event Listeners. Remember to check Framework Listeners if you want to see actual binds, not jQuery. Fiddle

Properties

Every selected HTML element is a DOM object. It has properties. The Properties tab shows the inheritance hierarchy of the selected DOM object.

Honestly, I do not use it myself very often. The only use is to check element properties without console.log and page refreshing. If you have some creative way to use this tab, please share it in the comments section.

Shapes and $scope

Shapes and $scope are additional tabs that come from Chrome plugins. Those topics will be covered in upcoming articles.

Ending

That’s all for today. If you want to explore more, look into Command Menu, or further reading.

Hope you liked it, and see you soon in the next article.

Further reading