Why developer tools are awesome for doing CSS

I feel that for anyone doing serious CSS, using developer tools make it sooo much easier.  I’m going to talk about Chrome’s tools today because that is what I use but I believe both Firefox and Safari have strong tool kits when it comes to dev tools.

You can see the changes right thene!

It’s amazing.  This is something probably most pick up (hopefully) pretty soon after they start developing.  You don’t have to ctrl + s and then refresh over and over, testing the different changes.  Let’s go ahead and make those changes in the browser and watch it happen!

Let’s try this in action.  My example is going to be from a gdetach_toolsreat place to go for help – stackoverflow.  Hit F12 to open your developer tools and then you can start making CSS changes right then.  I like to detach my tools and put them on a separate monitor (see screen shot) but you certainly don’t have to.  Just click, hold, and select the bottom option to detach.

SO_top

Now, those buttons look pretty nice but let’s say I want to make them a bit bigger.  From your developer tools you need to find those elements.devtools_mag_glass  There are several ways you can do this. I typically just right click and say “inspect element”. This will jump your dev tools right to the element you’re looking for.  Sometimes it’s trickier than that, so you can also use the magnifying glass to find any element in the page.

See all those styles on the site?  All of those can be changed on the fly.  Each time you change them, you see how it looks reflected immediately in the browser.  So, try increasing the font-size and see if that does what you want.  No?  Okay, adjust the padding.  Got it?  Good.  Now either find those selectors in your CSS code and adjust them accordingly or ghetto it out and use those selectors and overwrite the previous CSS. dev_tools_styles

#hmenus .nav ul li a {
padding: 4px 10px 5px;
font-size: 25px;
line-height: 1.3;
color: #fff;
background: #858d93;
-webkit-transition: background, 0.15s, ease;
-moz-transition: background, 0.15s, ease;
-ms-transition: background, 0.15s, ease;
-o-transition: background, 0.15s, ease;
}

Adjusted the font up to 25px.

Computed Styles

When you are going back and working on someone else’s stuff (every day life here at FixYourCSS), it’s pretty common to not know why the styles are acting the way they are.  It can be tricky digging through all the layers to see what is and what isn’t responsible so dev tools has another awesome help for this.

If you look at the picture above, you can see we are in the “Styles” tab of the tools.  Right next to it you can also see a “Computed” tab.  This displays all the active styles being applied to the selected element.  You can also click on the magnifying glass next to the style and it will quickly take you to the style under the “Styles” tab, where you can edit it and find the location of it in your style sheet.

Bonus

Under the “Styles” tab there are some other goodies that are dev_tools_goodiesworth mentioning.  They live in the top right hand corner, as seen in the picture here.  The plus button will add a completely new style, including a new selector.  The next one is how you test your CSS element state (hover, active, focus).

I really LOVE working in developer tools.  It allows such freedom to be able to play and see how things look immediately.  It’s such a powerful too and I feel that ANY developer (especially front end) needs to be using them.

Have some great developer tips to add?  Please feel free to contact us or leave a comment below!  We’d love to have your input!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.