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.
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.
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.
This way you can adjust your flex items or grid items accordingly.
Computed
If you are keen to check your margins, padding, borders, positions you can visualise them in your Computed Tab.
These are a few tips to use styling with developer tools but there are plenty of other tips and tricks to make our style more efficient and easy.
Here we go, That’s it folks for this blog. Hope everyone liked it.
If you like it, give it a clap 👏 and share it with your friends.
For more exciting content on Frontend, Please do follow me 🎯.
Feedback is most appreciable ❤️.
Thanks a lot, Everyone 🙏.
Until Next time,
Happy Learning ✍️
Abhishek Kovuri, UI developer
For more information, please do read
https://developer.chrome.com/docs/devtools/open/