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

latchkey 14y ago ↗

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.

ELV1S 14y ago ↗

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.

andrewfelix 14y ago ↗

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 :(

ELV1S 14y ago ↗

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/

andrewfelix 14y ago ↗

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

ELV1S 14y ago ↗

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).

Auto-saving CSS And JavaScript Changes Locally From The Chrome Developer Tools (addyosmani.com)

6 comments