Menu
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:
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?
632
You can save your CSS changes from Chrome Dev Tools itself. Chrome now allows you to add local folders to your Workspace. After allowing Chrome access to the folder and adding the folder to the local workspace, you can map a web resource to a local resource.
Choose your local folder where the CSS files you’re editing are located and now your files in the developer tools are associated with your local files (you’ll see a little green dot). Now, every time you edit the source code you can click “Command + S” and save your code changes.
Navigate to the Sources panel of the Developer Tools, Right-click in the left panel (where the files are listed) and select Add Folder to Workspace. You can get to a stylesheet in the Sources panel quickly by clicking the stylesheet at the top-right of each CSS rule for a selected element in the Elements panel.
Also, if you edit your CSS in your regular editor and you save the file, the changes will update in your Chrome without refreshing the page. Nice, huh?
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.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
