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.
How do you use Chrome Dev Tools to alter CSS and test?
Moderator: General Moderators
-
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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you use Chrome Dev Tools to alter CSS and test?
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?
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.
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.
All the best from the United Kingdom.
Re: How do you use Chrome Dev Tools to alter CSS and test?
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.
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.
- 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?
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?
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?
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.
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.
All the best from the United Kingdom.