Hey guys!
Today will be the first of some tips around the Chrome DevTools. For those who never used it, these dev tools are super awesome and handy for any Web Developer. There are different developer tools on each browser but they all share some main features. On these tips I'll only speak about the Chrome developer tools since It's the ones I use the most.

These tools can help us a lot with debugging different types of problems we might face when working on our projects: CSS bugs, requests not being made, slow performance on a page, etc. That being said, I really believe that this is a must for any Web Developer.

These Chrome DevTools have different tabs - Console, Elements, Sources, Performance, Network, Memory, Application, Security and Audits. On this first tip I'll talk about the 'Elements' tab. Let's start!

On the Elements tab we can see every HTML element that is on the page we're currently seeing. We can click on them to open and collapse their children. If we right-click on one of these elements, we have numerous options: we can add and remove attributes, we can remove that element, we can force a state like 'active', 'hover' or 'focus', and we can also edit that HTML element.

When we click on one of these HTML elements, the right side of the panel will show us all the CSS rules and properties being applied to that element. This panel allows us to toggle these CSS properties, remove them if we want and add new ones as well! On the bottom of this panel, we have a box modal of the element that's currently highlighted so we can see it's dimensions, padding, border and margin.

If you haven't used the browser developer tools before I really suggest you to start exploring it. I can't stress out how important and helpful this is! Stay tuned for more tips on the other tabs.