permalink

107

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

 

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.

107 Comments

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

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

  2. 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?

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

    argumentsArray[0]
    get messagefunction getter() { [native code] }
    get stackfunction getter() { [native code] }
    set messagefunction setter() { [native code] }
    set stackfunction setter() { [native code] }
    type"unexpected_token_identifier"
    __proto__Error

    any help?

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

        • 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

        • 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”.

  4. 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?

  5. 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?

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

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

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

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

  9. 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 ?

    • 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?

  10. 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’

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

      • 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?

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

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

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

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

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

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

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

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

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

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

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

  22. 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?

  23. 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 !!

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

  25. Pingback: Webdev links | Муза

  26. 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?

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

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

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

  30. 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 *.