16

My question relates to Chrome Developer Tools.

This is my workflow day in day out: I edit Shopify themes. I edit the CSS on a page using the DOM inspector in Chrome Developer Tools. For each tiny edit I am happy with, I need to click on the stylesheet, copy and paste the entire CSS rule that I updated, paste the resulting CSS rule at the bottom of the theme stylesheet after the comment /* Added by Caroline */, remove the CSS properties I did not edit, and repeat for every CSS bit I edit.

In an ideal world, I would go ahead and edit all the CSS I need to edit for several elements. Then I would go to Sources tab, right-click and select "Local Modifications" and then instead of this useless thing:

enter image description here

I would get CSS I can copy and paste at the bottom of my stylesheet below my /* Added by Caroline */.

I don't want to edit a stylesheet, which contains Liquid tags and Sassy CSS to be parsed by the server anyway. I want to only add at the bottom of that hybrid stylesheet whatever CSS diff I have come up with while live editing the CSS. That's it.

Is there an extension for this?

Caroline Schnapp
  • 798
  • 1
  • 7
  • 14
  • 1
    I desperately want this as well +1 – ChaseMoskal Feb 19 '14 at 06:06
  • An older question with some answers: [Export CSS changes from inspector (webkit, firebug, etc)](http://stackoverflow.com/questions/3355111/export-css-changes-from-inspector-webkit-firebug-etc). Sadly, not much has changed since then. – Etheryte Feb 19 '14 at 08:26

1 Answers1

5

Chrome DevTools lets you save (overwrite) the entire stylesheet by defining a workspace. Sass is supported, but bringing only the styles you changed as a separate set of rules is not.

I suspect the issue is that the order of the rules matters. A rule added to the bottom of the stylesheet may not have the same effect as the same rule placed further up the page. Since the goal of these tools is to commit the edits so the page will look exactly as you see it, saving just the diffs to the bottom might create new issues or orphan some styles. In other words, you may (and you probably do now) find that you add the changed rules to the bottom of your style sheet, then need to debug the rules that aren't working properly, adding more rules to override other rules.

I know, that's not really an answer to your question, but an explanation of why such a thing may not exist.

cloudworks
  • 599
  • 1
  • 3
  • 18