PHP Developers Network
http://forums.devnetwork.net/

How do you use Chrome Dev Tools to alter CSS and test?
http://forums.devnetwork.net/viewtopic.php?f=68&t=144369
Page 1 of 1

Author:  simonmlewis [ Fri Oct 06, 2017 4:13 am ]
Post subject:  How do you use Chrome Dev Tools to alter CSS and test?

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.

Author:  requinix [ Fri Oct 06, 2017 4:36 am ]
Post subject:  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.

Author:  simonmlewis [ Fri Oct 06, 2017 4:57 am ]
Post subject:  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.

Author:  requinix [ Fri Oct 06, 2017 7:02 am ]
Post subject:  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.

Author:  Christopher [ Sun Oct 08, 2017 11:36 am ]
Post subject:  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?

Author:  simonmlewis [ Mon Oct 09, 2017 2:52 am ]
Post subject:  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.

Page 1 of 1 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/