andymcgregor
andymcgregor

Reputation: 1015

Chrome Web Developer tools, live CSS editing won't work, resets to default

Got strange Chrome Web Developer tools behavior. When I try to change existing CSS properties of element, after hitting enter, it's resets to previous default state. Earlier, all works well. Has disabled all extensions, nothing changes. What is this? p.s Chrome version 22.0.1229.94m

Upvotes: 24

Views: 28581

Answers (8)

Taiger
Taiger

Reputation: 149

This is what worked for me.

Under Chrome Developer Tools > Settings > General Tab, check the option:

Disable cache (while DevTools is open)

Upvotes: 1

Ishan Madhusanka
Ishan Madhusanka

Reputation: 811

I had the same issue. After you make sure the file names are correct, removing the folder from the workspace, and adding it again enabled live editing to work as usual again on chrome for local files.

Upvotes: 0

gamliela
gamliela

Reputation: 4089

Restart Chrome and try again... You can also try reloading the page in a new tab.

It's probably a Chrome bug. It happens to me when I apply style to element with jQuery css() command, but I guess it can happen in many other scenarios as well.

Upvotes: 0

Fateh Khalsa
Fateh Khalsa

Reputation: 1506

Definitely check your stylesheet for errors - it may not even be anything that is obvious or that a CSS checker will find.

In my case the offending styles were some input element pseudo-selectors, for styling the placeholder text. Removed the lines, and it works perfectly again!

Edit: The error in my case seems to be caused more specifically by placing any of the non -webkit prefixed input-placeholder pseudoselectors inside of a media query. Go figure...

Now on to figuring out why that's a problem...

Upvotes: 1

ckdesign
ckdesign

Reputation: 11

I have this issue on a site and I narrowed it down to a missing background resource.

I have switched to using FireFox for live CSS editing, never had a problem with the FireBug extension.

Upvotes: 0

user2772325
user2772325

Reputation: 11

A Chrome bug with @viewport was the cause for me: https://code.google.com/p/chromium/issues/detail?id=278289

Upvotes: 1

Luke H
Luke H

Reputation: 3163

I'm not sure if this is the same problem, but I found this failed to work when the AdBlock Plus extension was active..

This might be the bug, but I can't remember for sure.
https://code.google.com/p/chromium/issues/detail?id=138854&can=1&q=adblock%20cr%3DPlatform-DevTools&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20Modified

I found that simply clicking the ABP icon and disabling it for the site in question restored functionality.

Upvotes: 4

Alexander Pavlov
Alexander Pavlov

Reputation: 32296

http://code.google.com/p/chromium/issues/detail?id=155795 has been fixed in the tip of tree, and the fix will eventually propagate into Chrome 23 (current beta) and Chrome 22 (current stable). Sorry about it, and thanks for your patience.

In any case, check your stylesheets for errors, since this kind of issues happens only while editing broken stylesheets. http://jigsaw.w3.org/css-validator/ is a good tool to use (pay attention to the "Parse error" errors.)

Upvotes: 6

Related Questions