The elements tab is the first tab in Chrome DevTools and is important to know for web developers. It is one of the simpler tabs to use but can be very useful for direct manipulation of the DOM. And here it is,
Inside it you can see it is divided into two parts, the left side is the source HTML and the right side has styles selected but it has more things as well, as you can see it has sub tabs inside it like computed, event listeners, DOM breakpoints etc.
You can edit the source anyway you like, if you want to edit a class name of an element, just double click on it and you are good to go. If you want to select a particular element in view, select the top left option and it will enable selection of any element on page by clicking on it.
Right clicking on the left side will give you more options like editing attribute or editing the whole source itself, this is handy as double clicking the elements only allows for attribute and enclosing text modification but not the tag itself.
Other tool in the same menu is the force state option, this is useful when you want to check behavior at some state like hover, focus etc. Not knowing this can create some annoying scenarios. Assume your input focus handler is not working properly and you want to debug something while in that state, it can become impossible to debug the element because the moment you click something in the DevTools section, the state is lost.
Now we move to the right side of the elements tab. This part is mainly used for styling but there are more handy tools inside this as well.
By default the styles tab is selected and it shows all the styles of the current selected element on the left side. This also shows any inherited styles and you can edit,add and delete these as well.
You will see some styles that are striked out, like the display property of div is striked out here, this means that this style not actually in use and is overridden by some other selector, here the display property of element.style is the one that is overriding it. element.style is the inline style of that property, which makes sense as it will override any other external styles.
If you want to see the stylesheet that has the style then you can click on the top right link of each style block, it will open the complete stylesheet for you. element.style does not have any since it is inline. There is also a visual representation of the dimensions of the current selected element, things like margin, border and padding can be seen directly here if you don't want to scramble through multiple inherited styles(which can be the case sometimes).
Now coming to other tabs, which can be seen below. Computed just shows the final styles of the element without telling you where it is coming from or which selector has given the style.
Next up, Event Listeners is a very helpful tool to check all the event handlers on the current element. Also it is categorized by events which makes it even better. If you want to navigate the click handler function of a button, just select the button as the current element and then check the click event listener here, this will give you all the click listeners attached to it. You can also remove the events.
The other tabs are not as much used, DOM breakpoints lists any breakpoints that you have set, which we discussed earlier. Next is Properties, this is deprecated and now used in console instead. And then there is Accessibility, which is helpful if you are building Accessible Rich Internet Applications(ARIA).
Having a good understanding of elements tab in DevTools is a must for any web developer, and knowing it completely saves a lot of time that would go wasted. DevTools are regularly updated, so some features might get added in the future.