问题
I'm a web developer/designer, and I need my code-illiterate clients to be able to easily mess with the colors of particular elements, save these CSS changes, and send them to me. I'll be guiding them over the phone, but I still need it to be easier than expecting them to locate CSS selectors in a theme sheet, and write hex codes.
I need an in-browser inspector that can allow a code-illiterate individual to:
- Easily manipulate colors on a web page's elements, with a GUI color-picker.
(+) Chrome does this perfectly. It's exactly what I want.
(-) Firefox's otherwise gorgeous inspector seems not to have this basic capability. - Save the affected stylesheet, so they can send it to me.
(?) Firefox's Style Editor makes saving sheets easy, however changes to inspected elements - strangely - do not seem to be applied.
(-) Chrome may supposedly be able to do this, deep within the Sources panel, but it seems you need to be a hacker to figure it out, because I'm the code-literate one, and I haven't yet figured it out.
I find the existence of this conundrum very baffling -- why have browser vendors bothered making such a rich web-page editing suite, where one can manipulate CSS, but not include a basic "save changes" feature? Am I missing something?
Edit 01:
I have found, in Chrome, that one can freely manipulate an element's CSS with the inspector, then click on the CSS sheet associated with each rule (in the top-right corner of the rule) to take you to the Modified CSS Sheet in the Sources tab. This is what I want to save.
From here, one can right-click anywhere in this modified source code, and then Save-As -- but strangely, unfortunately, and unintuitively, Chrome saves the wrong source code. It saves the original, unmodified source code -- not the modified source code you had right-click save-as'd. Very frustrating, and I'm currently trying to find a way around this bug. I'm so close!
Edit 02:
Okay, I've figured it out. When you save a file in Chrome's Sources tab, you're not just saving that file -- you're actually setting Chrome to constantly auto-save that file upon every change you make to it.
This is actually kind of cool, but very misleading.
So, after you save a CSS file, Every change you make to an element's CSS in the inspector, will auto-save to that file. This persists even if you restart the browser.
Confusion arose, because when you have a file marked for auto-saving, and you then Save-As a modified file, Chrome weirdly writes the original file, not the one you right-clicked. As soon as you make any change after that, when Chrome will auto-write every current modification to that file. I regard this to be a bug in Chrome.
Lesson be learned, First, Save-As the file. Second, make your changes.
Presto, your modified CSS theme awaits you on your hard disk.
To be clear, if you Save, then make changes, then save again -- Chrome will have saved the Original Source, not your Modified Source. This makes the order of things important.
I do not know of a way to see a list of files currently marked for auto-saving, or how to unmark them.
回答1:
How to use Chrome to play with CSS and Save it
- Determine which Stylesheet you will make changes to. Be sure to only affect rules associated with this stylesheet.
- Navigate to this stylesheet in the Sources panel of the Developer Tools, Right-click it, and Save-As this file to your computer. 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.
- Freely make changes to CSS Rules associated with your chosen-and-saved stylesheet. Chrome will automatically save each change to the stylesheet you saved on your computer.
Keep in mind, however, that you must do things in this order. If you save the stylesheet, then make your CSS changes, then save again, Chrome will oddly write the original unmodified source to file (until you make one more change, which causes Chrome to auto-save all changes to file).
How to use this with your clients and friends
- Set up a theme stylesheet with blank (or default-ish) CSS rules (that have top precedence) for every element you intend to let them play with.
- Over the phone, guide them to Save-As this theme stylesheet from within the Sources panel.
- Guide them in inspecting elements, and using the the Chrome inspector's GUI color-picker to meddle around and find the exact colors they want.
- Have them send you the saved stylesheet :)
It's a good idea for you to verify that the modifications are in the file they sent you, before they close their browser window :P
回答2:
i use this Chrome extension to save the files i modify directly in Chrome DevTools.
Seems hard to configure it, but it does his job. Plus i think it's a must-have for web-developers/designers.
Maybe with some tweak you can make it do what your trying to do.
回答3:
Sitemod.io allows you to use Chrome Developer Tools to edit any HTML, CSS or JS code on any live or local web page. After you finished working, you can save the edits and get a unique URL to the modified version so you can share your mod with your clients.
Here is an example that illustrates how the above can be done.
I'm one of the developers of this tool so please feel free to ask me anything 🤓
来源：https://stackoverflow.com/questions/16005435/browser-as-a-design-tool-change-colors-save-them