12

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.

ChaseMoskal
  • 7,151
  • 5
  • 37
  • 50
  • 1
    Because the browser has no write-access to the files? ;) Save-as might be nice tho –  Apr 14 '13 at 23:14
  • 1
    possible duplicate of [How to save CSS changes of Styles panel of Chrome Developer Tools?](http://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools) – bookcasey Apr 14 '13 at 23:16
  • 1
    @bookcasey -- I believe that post is already obsolete. They are pointing to the Resources panel, and Chrome has since moved this functionality to the Sources panel. After further examination, I think I may have found the official way to do this in Chrome. [will post solution once I find it] – ChaseMoskal Apr 14 '13 at 23:24
  • @Allendar: Save-As functionality is precisely what I'm looking for. – ChaseMoskal Apr 14 '13 at 23:24
  • Well; you "can" copy/paste the whole adjusted source into a textearea and then AJAX some serverside script to rewrite the file for you. Added to that you might add a header refresh afterwards, or a AJAX source refresh. Enough options :) –  Apr 14 '13 at 23:31
  • ehm did anyone read my answer? :) – Yenn Apr 14 '13 at 23:32
  • Yes, and what do you expect? :) –  Apr 14 '13 at 23:33
  • some sort of feedback? – Yenn Apr 14 '13 at 23:38
  • @Allendar, I'm satisfied with the client emailing me the modified stylesheet back to me. I have found that, in Chrome's CSS inspection panel for an element, one can click the style-sheet associated at the top-right of each rule, and it takes you to the modified CSS source. From here, you can right-click (anywhere in the source), and Save-As, however, in what appears to me as a bug in Chrome, the file that is saved is the Original Source -- not the source code you right-clicked save-as'd. How frustrating. – ChaseMoskal Apr 14 '13 at 23:38
  • So, it turns out, when you save a source file in Chrome, you're not just saving it. *You're setting Chrome to constantly save to that location, for every modification.* Which is neat, but annoying and unnecessary. I just want to save once. This constant-saving persists even if you restart the browser, and I can find no way to tell what it's deciding to auto-save on-change. ***Confusion arose,*** when Chrome is secretly auto-saving that file, and you Save-As again to overwrite, it writes the original file, not what you right-clicked on. Once on more change is made, chrome auto-writes all change – ChaseMoskal Apr 14 '13 at 23:55
  • @Allendar: Solved the issue. Answer posted :) – ChaseMoskal Apr 15 '13 at 00:29
  • Good to hear :). Try to use a bit less **bold** in your future posts. Just checked your past posts and you really overuse it :P Good luck with you coding :) –  Apr 15 '13 at 10:54
  • @Allendar: ***I use bold in two different ways.*** First, **I use it to highlight key points,** which allows one to **quickly skim** my paragraphs to pick out the important stuff; I fully understand that most people don't care about most of what anyone has to say, and are trying to **tersely get a gist** of the situation. Ideally, I like to start with a bold summary, and then **fill it in with un-bold details for the intrigued user.** The second way I use bold, is to put **stronger emphasis than mere italics,** to better represent **the way I would speak it.** *Take that, Allendar!* :D – ChaseMoskal Apr 16 '13 at 21:02
  • This is great! Now how do you Stop auto-saving that css file? Even if I delete the saved file, it keeps reappearing whenever I make changes to the :/ – bksunday Aug 06 '13 at 21:31
  • Saving via **workspace mapping** is the current solution. What i'd really like to see is a list of differences (or diff) between original and modified, for all files. http://stackoverflow.com/questions/23642839/view-a-diff-of-changes-in-chrome-developer-tools – Jacob Dorman May 18 '14 at 06:22

3 Answers3

10

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
ChaseMoskal
  • 7,151
  • 5
  • 37
  • 50
  • come on really? there is an extension that do the exact same things you would do manually, and i posted it as an answer like 1 hour ago. – Yenn Apr 15 '13 at 00:34
  • 6
    @Yenn: Yes. **Really.** *I don't want to use an extension to replicate functionality that already exists natively in the browser.* – ChaseMoskal Apr 15 '13 at 01:44
  • Very nice and descriptive answer, +1 for it. Also the autosave extension is little complicated to configure if somebody is new to NodeJS. – Anmol Saraf Jun 17 '13 at 20:46
  • This is not the behavior that I would have expected. Good catch. – Jared Apr 15 '15 at 22:23
  • Silly question maybe: I guess when you save as, do you have to go find the original stylesheet (i.e. the actual source code?) and save over that? – Nick.Mc Mar 05 '17 at 02:14
3

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.

Yenn
  • 919
  • 6
  • 20
  • I'm quite comfortable with my workflow in Notepad++, and I'm more looking for a solution that is as-simple-as-possible for my clients -- without requiring them to install any extensions. I posted my own answer about a solution I've figured for Chrome without extensions. **Thanks for your contribution anyways, Yenn,** as I'm sure one day a Googler will find this thread, and find your answer more relevant to their needs. Frankly, you've got me curious about DevTools for my own workflow :) – ChaseMoskal Apr 15 '13 at 00:42
  • well i deal with my clients everyday and a 1-click-n-go extension is the simplest way i think... anyways im comfortable with my SublimeText2 (or Dreamweaver for some bigger project), im not working with the extension, it's just for a quick job. As always, same goal, so many ways to reach it ;) cheers – Yenn Apr 15 '13 at 01:00
  • "simplest way"? In your answer, *"Seems hard to configure it, but it does his job. [...] Maybe with some tweak you can make it do what your trying to do."* -- this is the part that leads me to believe that Chrome DevTools is perhaps not the simplest way. I don't intend to have my clients installing *and configuring* anything to perform the task that Chrome can already natively handle. *This doesn't mean I think your answer is wrong,* but I don't think it is the simplest one for my clients in my given situation. – ChaseMoskal Apr 16 '13 at 21:09
  • Even if very useful, to work with [DevTools Autosave](https://chrome.google.com/webstore/detail/devtools-autosave/mlejngncgiocofkcbnnpaieapabmanfl) you need to install a mini-server (which is provided) which in turns requires node.js, so definitely not a 1-click-n-go extension. – f.cipriani May 03 '13 at 10:32
  • What's wrong with installing an extension to make it easier for your clients? I agree that making them configure stuff is going to confuse them, but installing an extension sounds reasonable. – Milind R Jan 26 '15 at 12:30
0

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

Luigi
  • 1