Styling with Chrome Developer Tools!!

Developer Tools are quite common for UI developers, but do we use them efficiently for development?
I am happy to share some of the tips which makes your styling work easier and more efficient at the same time.
Without any Delay, Let’s get started ✍️

Dev tools provide us with a lot of options to check our Styles, The scope of this blog will be mostly on Styling.

Developer tools

Styles

So all the CSS for the page will be visible in Styles Tab. In this tab, you can play with CSS and check which style suits you the best.

How to use it?
Simple, Just click on the DOM element which you want to style, Upon clicking you will get all existing styles on the page and if you want to check or try new styles you can add some styles.

There are two ways you can style for selected DOM elements,

Either use element.style or else you can .cls which helps you create a new class. If the style suits the page, you can simply copy it and paste it into your CSS file.

There is one more interesting feature available in the style tab i.e:hov

These options help you to check the effects of your page like Hovering, Active, focus elements, etc.

Unused CSS

You can also keep track of unused CSS code and remove them to make your page performance better.

Layout

The layout of your page is in Layout Tab in short your flex and grid styles will be available in this tab.
If we want to know the exact positions of your flex items or grid items, once upon clicking on the DOM element which is flex or grid, you can easy the visuals on the page and make your changes accordingly.