Is there any technique for A/B testing CSS changes made to an element in Web Inspector?

That is, evaluating before & after states (loaded vs changed) for a given element.


You can do a sort of this if all your changes live in the same external stylesheet. Once you are done with the CSS tweaking, switch to the Resources panel and find the affected stylesheet resource. It should have a subtree of revisions beneath. The topmost revision is the current one, the deepest one, called "(original)", is the original resource version. Right-click any revision and choose "Revert to this revision" in the popup menu (the original version in your case). The stylesheet will get reverted and the revision with the changes will become the second-topmost one. You can revert to this revision once again to re-apply your CSS changes.

| improve this answer | |
  • That's a great feature. The only thing I still wish for, is some sort of keyboard toggle for this... say, ⌘1 for original and ⌘2 for most recently tweaked state (shortcuts just being example key combinations, could be anything). If nothing else works, I do have Keyboard Maestro and perhaps it may be possible to figure something out using that). – Henrik Feb 5 '12 at 10:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .