Chrome's V8 is faster
Elegant code navigating with the keyboard
Prettyprint functionality for compressed source code
Integrated DOM query selectors
Pressing Ctrl+S then applies the changes with the huge advantage that you can directly inspect its effect. Unfortunately however, once you refresh the page those changes are lost again, as the files are reloaded from the server. Wouldn't it be nice to directly save them to the original source files??
Chrome Devtools Autosave is a project created by Nikita Vasilyev to address exactly that problem. The project consists of
a Chrome extension and
a local NodeJS server
I'm not going into too much details on the installation process, just go to the GitHub repository and check out the readme file there. That should work out perfectly. If not, feel free to leave a comment on this post or drop me a line and I'll see how I can here.
There are some important things to know, namely for the Chrome extension to work, you have to enable the "Experimental Extension APIs"
A browser restart is needed in order for the flag to take effect.
Starting the server
After successfully installing the autosave server, a simple command autosave on your console should give you this
$ autosave DevToolsAutosave1.0.0is running on http://127.0.0.1:9104
Out of the box, Autosave directly operates on file:/// urls. This means you have to open your HTML page directly from the file system. Why? Because in this way the url in the browser bar directly maps to the location of the file on the hard disk. Now, that might work in many cases, especially in simple scenarios, but usually you run your app from some webserver that is running locally on your machine, right?
Autosave has a solution for that as well, namely routing. If in Chrome you go to Tools > Extensions and then click on "Option" on the DevTools Autosave extension
Then the following page should open:
This page is quite self-explanatory. As you can see, on the left side, the first routing handles the simple file:/// mappings, while the 2nd entry is one I placed there, which basically maps all requests going to the address http://coding.jmbp.local/ (which is my local Apache web server) to the path /Users/juri/coding/. You need to pay attention to the path endings, however if a save didn't succeed, you'll get a Chrome desktop notification explaining the issue.
Ok, so far so good, but listen, I'm not the guy who has NodeJS on my machine, I barely even know what it is.
Again, as with the AutoSave Devtools, working by using the file:/// protocol works out of the box. When you want to work from a webserver you have to just open the Chrome Developer tools, switch to the Tincr tab and give it the root of your project.