How do you use Chrome Dev Tools to alter CSS and test?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How do you use Chrome Dev Tools to alter CSS and test?

Post by simonmlewis »

I have used Firefox's Developer Toolbar for a long time. I find it's Edit CSS panel brilliant. Alter and it alters live/demo. Then copy paste the CSS into the live environment.

I have found lately that Firefox is using an obscene amount of memory. I had three or four tabs open and it was 1.3gb of memory. Crazy, and I don't have many plugins/extensions either.

So I started using Chrome more, gradually remembering passwords etc, and it uses way way less memory. Right now I have six tabs open, three are Wordpress Themed admin areas, and it's only 170mb in Task Manager.

But how do I use the Dev Tools in Chrome to edit the css and see it tweaking the page? A bit of advice would be great.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: How do you use Chrome Dev Tools to alter CSS and test?

Post by requinix »

Right-click something and Inspect. Or hit F12 and go to the Elements tab. You can navigate through the HTML and on the side is the active CSS rules you can add to, edit, or disable/remove.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you use Chrome Dev Tools to alter CSS and test?

Post by simonmlewis »

Mmm yes I can see it can do that. But is there no way of seeing the WHOLE CSS and editing it there, like you do with FF's web developer?
Then you can copy the whole CSS and update it on a CSS file if you want.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: How do you use Chrome Dev Tools to alter CSS and test?

Post by requinix »

What "whole" CSS? There can be multiple files, inline styles, native styles... The entire CSS ruleset would be ridiculous.

If you want to see the contents of individual CSS files then use the Sources tab, or click the filename "links" by the CSS rules in the Elements tab.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: How do you use Chrome Dev Tools to alter CSS and test?

Post by Christopher »

When you right-click and inspect an element, you see the entire cascade of styles. There are tabs that show the final computed values, etc. It is similar to Firefox, just orgainzed a little differently.

I do find the lack of the Style Editor and not being able to easily seeing all sources to be negatives for Chrome -- but it is very workable.

PS - what does it matter if Firefox uses 1.3gb of memory? How much memory do you have?
(#10850)
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you use Chrome Dev Tools to alter CSS and test?

Post by simonmlewis »

It's good that it can tell you what style is being used when you click on an element (saves hunting it out), but also if you want to then replace that code, in Firefox I highlight that code and paste it into the old CSS. AS you say, it is organised a bit differently.

For some reason, even tho I have 16gb of ram, I find that Firefox gets so damn slow compared with Chrome, and when I look, Chrome is on 165mb, and FF is on 1.3gb.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply