Auto-saving CSS And JavaScript Changes Locally From The Chrome Developer Tools

addyosmani.com

5 points·cleverjake··6 comments

This is really great except for all of us that use CoffeeScript|Less|Sass since what is shown in the dev tools is the compiled version of our source.

I believe it's possible to make Less and SASS work. https://addons.mozilla.org/en-US/firefox/addon/firesass-for-... does work somehow. Can't same the same about CoffeeScript.

I'm going to give this a try to replace my current text editor.

I suspect this would be more useful if I didn't have 2 monitors. Currently I have my text editor on the left with all my files easily accessible, and the browser open on the right. So the biggest pain is having to hit refresh (not that big a deal).

Looks like it would be great for coding on the go with a single small monitor.

EDIT: Tried it. Chrome sux as a text editor :(

Web Inspector editor is not powerful yet, but I'm working in this direction: https://bugs.webkit.org/show_bug.cgi?id=70182, https://bugs.webkit.org/show_bug.cgi?id=71625, https://bugs.webkit.org/show_bug.cgi?id=70181, https://bugs.webkit.org/show_bug.cgi?id=69986 ...

What bothers you the most?

> So the biggest pain is having to hit refresh (not that big a deal).

You could try http://livereload.com/

Is there a way to edit the code as if it were just text? ie. not have to double click the values?

Yes. You can edit CSS in Resources panel (http://youtu.be/N8SS-rUEZPg?hd=1&t=7m18s) and JS in both Resources and Scripts panels. It doesn't have any code completion yet. Also, you have to double click to enter edit mode (I don't know why https://bugs.webkit.org/show_bug.cgi?id=71645).

Reply on news.ycombinator.com