Nerd For Tech
Published in

Nerd For Tech

Styling with Chrome Developer Tools!!

Chrome Devtools

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

:hov options

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

Suggestions for different styling.

Unused CSS

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.

grid visuals

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.

Details of CSS box elements of a DOM element

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/

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store