permalink

103

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

Read Later submit to reddit

 

Today we're going to take a look at how you can greatly simplify how you locally develop for the web.We all have our own workflow when it comes to working on the front-end, but there are some common steps we almost all use:

  • Experiment with changes to styles, scripts or markup using some web developer tools
  • Go back to a text editor to apply those changes and save them
  • Refresh the browser to ensure our changes have been saved
  • Continue debugging

Whilst this workflow works fine, it can be made a lot easier thanks to a new extension for Google Chrome called the Chrome DevTools Autosave (by Nikita Vasilyev).

Chrome DevTools Autosave allows you to make live changes to local CSS and JavaScript files directly from inside the Chrome Developer Tools. Happy with that border-radius you've just tweaked in the browser? Satisfied with that minor JS fix you just tried out? With Autosave, changes you make inside the browser are automatically saved to their corresponding local files. 

This removes the need to constantly switch back and forth between a text-editor and your browser to make such changes and can be a real time-saver.  For all the details on what Autosave is capable of, check out the screencast I've recorded above.

How does it work?

Locally saving to files from Autosave is possible thanks to the onResourceContentCommitted event in Chrome 15+, which fires whenever changes are made to CSS and JavaScript for a page. For those interested, usage of the event itself looks a little like this:

chrome.experimental.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(event) {
    //event.url
    //event.type // 'script', 'stylesheet' or 'document' (happens when you add new CSS rule)
    event.getContent(function(content) {
        //content - all the content of updated file as a string
    });
});

The extension itself relies on a local node server running (which we'll discuss shortly). Changes made from within the Chrome Developer Tools are pushed to the server, which then resolves the local URLs of these files and overwrites the old ones with the new ones.

Note: For those with an earlier version of Chrome, I've been happily using Autosave with the Chrome Canary builds which you can grab from here.

Getting Setup

The installation process for Chrome DevTools Autosave will probably take less than 3-5 minutes.  Assuming you have access to or have installed Chrome 15+, the two setup steps are as follows:

Installing The Extension

  • Open chrome://flags/ and enable Experimental Extension APIs (it won't work without this!)
  • Restart your browser
  • Download the extension and install it

Installing The Server

Autosave uses a local node server to save files. To install, simply complete the following steps:

  1. Install Node.js if you don’t already have it.
  2. Run npm install -g autosave in a terminal/console.

Usage

Run node chrome-devtools-autosave-server/index.js from the command-line and then simply open up a local page you wish to edit. As long as you're accessing it using the file:// scheme, you should be able to easily make changes from inside the Chrome Developer Tools and have them instantly saved to the local CSS or JavaScript copies of those files. It's as simple as that!.

Pro-tips

  • Whenever Autosave updates a local file, a 'Saved a <filetype> to <filename>' notification will be output at the console. You don't need to keep a constant watch for this, but if you'd prefer to avoid refreshing to see if changes have been saved for sure, it's certainly an alternative.
  • Not only does Autosave support what I demonstrated in the screencast, but it can also let you do the following:
    • Adding comments like /*hello world*/
    • Editing multiple-properties at the same time. e.g if you wanted to to add a value for the background-image then add an override for that value if the browser supports CSS3 gradients (the old progressive enhancement trick), this is also supported:  
      background-image: url(some_gradient.png);
background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.03, #6E9577), color-stop(0.52, #8FB39B))
    • Update existing JavaScript functions without the need to reload the page at all. Definitely useful.
  • One trick I didn't see documented was this: although your changes may be made to local files instantly, if you go back to the Resources tab after making a change and click on the drop-down arrow next to any modified stylesheets or scripts, you can get a version history of what's you've updated (as long as you haven't refreshed). This isn't specific to this extension, but can come in useful if you accidentally wipe out a bunch of things you'd like to revert back to.

Conclusions

And that's it. I personally found Autosave very useful for working on smaller projects and it does do everything it says on the tin.

If you choose to use it, just keep in mind that although we're typically used to using the developer tools for debugging or experimentation, removing whole rules in your styles (even if just to try something out) will result in them being removed from the local file too.

As long as you're aware of this, it's a really neat tool to have in your utility belt and I'm happy to recommend checking it out. Please help us spread the word if you find it useful.

103 Comments

  1. stefan December 16, 2011 at 9:20 am Reply

    Hey Addy,
    thanks a lot. that's amazing. Do you see any way to use auto-save with the apache virtual hosts? 
    I will use it anyway, but would be nice to type in my typical url like 'local.whatever.de' instead of file://whatever.html…
    Thanks.
    Stefan

      • brain December 16, 2011 at 10:08 pm Reply

        actually yeah I looked at this guy a bit closer. My bookmarklet does the same thing but different, and actually does more (well, will do more… ).

        I’ll post here when it’s ready.

  5. Kees December 16, 2011 at 1:26 pm Reply

    Hmm, I seem to have an issue on Win7; when I change something in the CSS it returns a notification saying "UNKNOWN, unknown error 'C:\C:\Users\…' ". I have NodeJS installed and followed the exact instructions. Does anyone know how to fix this?

  7. Erik Dana December 16, 2011 at 6:08 pm Reply

    Couldn't get it to work… 
    SyntaxError: Unexpected identifier

    arguments: Array[0]
    get message: function getter() { [native code] }
    get stack: function getter() { [native code] }
    set message: function setter() { [native code] }
    set stack: function setter() { [native code] }
    type: "unexpected_token_identifier"
    __proto__: Error

    any help?

      • Addy December 18, 2011 at 10:27 am Reply

        It would appear that more than one person is experiencing this issue under Windows 7 64bit. Assuming you have node.js setup correctly and you’ve run everything as instructed I would file a new issue on the tracker so there’s a central place to try solving it.

        • Frans S December 20, 2011 at 2:30 am Reply

          I got the same error. I have installed the plugin as you have described in the section “Installing The Extension”. I then downloaded Nikitas proj from github, opened his index.html file in folder example. Inspected the h1, changed color from white to red. Got error: http://127.0.0.1:9104/save does not responding.
          I use: Win7 Ultimate 64bit Chrome 16.0.912.63 beta-m

        • Michael February 9, 2012 at 11:34 am Reply

          I’m getting the same error too. The server is up (connecting to 127.0.0.1:9104 from Chrome gives a “X-URL header is missing” response), but editing a style gives a “http://127.0.0.1:9104/save does not responding error

          This looks really useful, if it worked.

          BTW, that should be “is not responding” or “does not respond”.

  11. Rhys L December 18, 2011 at 6:10 pm Reply

    I would love for a Save button or something (as opposed to Auto-save) as I often use the Dev tools for debugging and experimentation, and I often need to refresh if I go a little too far with rule modifications. Could this plugin be modified to work as a save button?

  12. simon December 19, 2011 at 7:38 pm Reply

    Hi feel like a idiot but cant seem to install not sure what im doing wrong.. installed node > npm install -g autosave is coming up with error… am i missing something?

  13. Reuben December 19, 2011 at 10:28 pm Reply

    First of all..this is Fucking AWESOME! Thanks!!

    Second, I can’t get it to work :(

    Im getting this in Terminal:

    npm http GET https://registry.npmjs.org/autosave
    npm http 304 https://registry.npmjs.org/autosave
    npm ERR! Could not create /usr/local/lib/node_modules/___autosave.npm
    npm ERR! error installing autosave@0.1.0
    npm ERR! Error: EACCES, permission denied ‘/usr/local/lib/node_modules/___autosave.npm’
    npm ERR! Report this *entire* log at:
    npm ERR!
    npm ERR! or email it to:
    npm ERR!
    npm ERR!
    npm ERR! System Darwin 11.1.0
    npm ERR! command “node” “/usr/local/bin/npm” “install” “-g” “autosave”
    npm ERR! cwd /Users/kangaroobin
    npm ERR! node -v v0.6.6
    npm ERR! npm -v 1.1.0-beta-4
    npm ERR! path /usr/local/lib/node_modules/___autosave.npm
    npm ERR! code EACCES
    npm ERR! message EACCES, permission denied ‘/usr/local/lib/node_modules/___autosave.npm’
    npm ERR!
    npm ERR! Additional logging details can be found in:
    npm ERR! /Users/kangaroobin/npm-debug.log
    npm not ok

    • Addy December 29, 2011 at 8:10 am Reply

      My apologies! When I’m referring to the terminal I mean the equivalent of the OSX terminal on your current environment. On Windows this would be the Dos prompt/command-line.

  16. Pingback: Auto-saving CSS And JavaScript Changes Locally From The Chrome Developer Tools | D3sordr3

  17. James Hatfield January 1, 2012 at 6:06 pm Reply

    This is a great new tool. My team is currently using CharlesProxy and it’s map local feature for fast edit and debug as it lets you override requests for remote files with your local copy. This lets you see live production data and how it reacts to your local edits with a simple refresh. We are looking at how to combine this with the new Chrome tools.

  22. Interned January 7, 2012 at 10:45 am Reply

    It still doesn’t work while using Notepad++ on Win 7 :”http://127.0.0.1:9104/save does not responding”. Any solution to fix this ?

    • Jeff Scott January 17, 2012 at 5:03 pm Reply

      I second this! I have Compass watching for changes on the scss as described in the SASS tutorials which totally ROCKS. But then I’m conflicted about using that vs using this for normal css at the same time.

      I don’t think this is something that we can really address on our own. Google needs to implement some kind of resource locator than can sorta travel backward if you will, to find the scss and make changes there from within the dev tools and then recompile on the fly. So basically you would have to do all your SCSS editing in the resource window like we do with scripts rather than on the elements tab sidebar where the matched rules/computed css is spit out. The holy grail of development is within sight! Dev tools on one screen – page on the other, make sass changes that use compass framework, that will autosave/compile/refresh page on the fly. lol too much to ask for?

  24. Gary February 4, 2012 at 8:40 pm Reply

    I’m having problems with the install, could you maybe just clarify something? I installed Node.js, Enabled Experimental, ran the sudo… – all is fine until I follow your instruction:
    ‘Run node chrome-devtools-autosave-server/index.js from the command-line ‘
    When I type this into Terminal I get the response ‘No such file or directory’. I changed to the directory where autosave exists, same result. I tried it in Chrome console, no luck. Where is the Command line you refer to?
    Also on the github site under Usage the author gives the vague instruction ‘$ autosave’. Where is this command run? If I try it in Terminal I get ‘No such file or directory’

  25. Tobi February 5, 2012 at 6:11 am Reply

    Hey guys I just found this because I’m doing the “30 days to learn jQuery” tutorial ;)

    I had this problem aswell and since I’m a Windows guy I didn’t get what they mean with
    $ autosave
    but you have to start the server or smth. Under windows it’s in
    C:\Users\unsername\AppData\Roaming\npm\autosave.cmd
    Just doubleclick that and the server starts and autosaving starts working :)

      • Steve February 11, 2012 at 5:57 am Reply

        I’ve run autosave at the command prompt and get the “DevTools Autosave 0.3.1 is running on http://127.0.0.1:9104” line, but it’s not actually working in Chrome – when I refresh the page, the changes get lost. I tried a reboot and tried closing/reopening chrome and closing/reopening the command prompt and simply can’t get it to work. How do you get it to start autosaving?

        • Mike Higginbottom February 13, 2012 at 1:57 am Reply

          This sounds like the same problem I reference in my Feb 9 10:15 comment below. It turns out you can’t edit HTML files, only CS and JS. There’s a feature request in for this. Additionally, there was also a bug which stopped it working in Chrome v17 so you might want to follow the instructions to check you’re up to date with the latest extension code.

  27. Mike Higginbottom February 9, 2012 at 10:15 am Reply

    Should this work when editing inline styles? It’s not doing for me. Works fine when editing styles in an external CSS file through Chrome dev tools but not when editing an HTML file with inline styles. Pretty sure I’m doing something stupid here but can’t work out what.

  28. Steve February 10, 2012 at 6:58 am Reply

    I have installed Autosave and it works great, but when I exit out of my terminal, Autosave fails. Im running Mac OSX 10.7.2. Is there a script to start autosave without running terminal? btw: a new-bee at programming. Thanks.

  29. Robert February 12, 2012 at 7:56 am Reply

    Hi,

    Im having a problem with running autosave on my Win7, 32-bit.
    I have autosave running in my console> DevTools Autosave 0.3.1 is running on http://127.0.0.1:9104.

    I have enabled the experimental API in Chrome 17.0.963.

    When I open a html file on my disk, I edit the css after i inspect the element, nothing happens.

    Could you please help me with this issue?
    Thank you, Robert

  30. Steven February 13, 2012 at 6:25 pm Reply

    Get the following error after I go to the CMD and type in node

    C:\Users\Administrator>node
    > autosave
    ReferenceError: autosave is not defined
    at repl:1:2
    at REPLServer.eval (repl.js:80:21)
    at Interface. (repl.js:182:12)
    at Interface.emit (events.js:67:17)
    at Interface._onLine (readline.js:162:10)
    at Interface._line (readline.js:426:8)
    at Interface._ttyWrite (readline.js:603:14)
    at ReadStream. (readline.js:82:12)
    at ReadStream.emit (events.js:88:20)
    at ReadStream._emitKey (tty.js:327:10)

    Any advice spent over two hours on this! Thanks to the “30 days to learn jQuery” tutorial. I don’t like it when I waste my time on this for so long. I know its a great little app as well.

  32. Corey Lee February 27, 2012 at 3:26 am Reply

    Very useful extension for Chrome! I also knew about this from “30 Days to Learn JQuery”. They have great videos on JQuery tutorials. I also agree with others that autosave can be risky so need to be really careful before you overwrite your previous codes.

  34. Pingback: pinboard March 4, 2012 — arghh.net

  35. Pingback: Live save & edit – CSS in Chrome für ASP.NET Projekte « SquadWuschel's Blog

  36. Pingback: Mike Smullin | Sweet! Chrome as Live JavaScript, CSS, HTML editor

  39. Vinay Aggarwal May 17, 2012 at 5:04 am Reply

    It is working and it’s great! Thanx. :)
    But out of luck to see your screen-cast as the vimeo site is down. :(

  41. Pingback: interessante Links der letzten Woche 21. May 2012 | MKPlog.de – Digital Media, IT & Webtech

  42. Terrance June 12, 2012 at 1:16 pm Reply

    I’m having trouble with the install. When I run ‘npm install -g autosave’, I get a long list of errors ending with ‘npm not ok’.
    When I run ‘sudo npm install -g autosave’, I get ‘sudo is not recognized as an internal or external command, operable program or batch file.’
    I am using the latest version of Chrome (v19)
    I am running Windows7 64bit
    I’ve installed the latest version of node.js (v0.6.19 verified with node –version)
    Can anyone please help me with this?

  43. Mossill June 27, 2012 at 8:09 pm Reply

    Yea… I’ll use this when I can edit HTML. Developer Tools has proven to be the most useful tool for me as a web developer. Someone should really dig deep in making developer tools a full blown editor with server side editing. For HTML files ESPECIALLY. I like where it’s headed though, I’ll keep an eye on this !!

  44. steve July 2, 2012 at 2:16 pm Reply

    Looks really cool. But personally I need to be able to choose when to save and when not to. That’s critical. A lot of times I like to just play around. I know you can revert, but that seems like a hassle to me.

  45. Pingback: Webdev links | Муза

  46. RichieRich August 21, 2012 at 11:02 am Reply

    Thanks for the app, its really helpful.

    I pulled down your code and put it into chrome manually.

    Was looking to edit some of it. My edits dont appear on the frontend though. In fact, deleting the code out of the js files still allows the app to work. Is there something special I need to do to have my code(simply console.log) work when the app runs?

  47. Oscar August 22, 2012 at 2:20 pm Reply

    Hi, great extension!

    But I think that I have a very important problem using it. When I save a change sometimes my style from inspector, style from filesystem is not replaced, instead all the css code is added again, and at the end I have a css file with thousands of lines. Why this problem?

    Thanks

  48. sanjaypoyzer September 18, 2012 at 9:35 am Reply

    Hi,

    I’ve followed the step by step and got up to the part where you have to write autosave in Terminal. However, I’m getting this message back:

    http://127.0.0.1:9104 is already in use. Exiting.

    I thought this might mean it’s already up and running, but I tried and autosave doesn’t work.

    By the way I’m running OSX.

    Thanks a million for any help.

  49. Vladimir October 6, 2012 at 5:22 pm Reply

    Hi! Have trouble wih installing autosave. “ssl error: unable to verify leaf signature”.

    I’m installed it on my other computers and all was great, but this time ESET NOD show me some message to allow or denied access to this process, I’ll choose “yes, always” and now I’m not sure that I was right.

    Is there any idea how can I fix it? It’s really comfortable tool for me.
    Thanks.

  50. Chris October 9, 2012 at 7:19 am Reply

    Thanks for posting this – I think my brain might explode from the awesomeness of this.

    BTW … for any poor saps on Windows (like me) – the path was a bit bumpy to get this working. Here are my notes that got it working for me on Windows 7 x64.

    ==================================
    A.) After installing Node.js make sure to add the bin path to your PATH. For me it was [C:\Program Files\nodejs\node_modules\npm\bin]

    B.) To get things working
    1.) Install the extension in Chrome: http://goo.gl/BYwdP
    2.) Install NodeJS: http://goo.gl/3nBP
    3.) Run CMD as Administrator
    4.) Type “npm install -g autosave” (no quotes) and hit [Enter]
    5.) Type “autosave”
    6.) Run the nodejs program from Start Button/Programs
    7.) Type this in the nodejs terminal “node chrome-devtools-autosave-server/index.js” and hit [Enter]
    8.) Load up Chrome and try it out (using methods in video above to test)

    9.) [Optional] setup a batch file on Windows startup to kick off the above-mentioned command prompts on logon.

Leave a Reply

Required fields are marked *.

*