Juri StrumpflohnerFollowJuri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies
5 min read
Although classical web devs have 10 and more years experience in developing Web applications I found that they didn't interact with Browser tools like Firebug or the Chrome Developer tools as much as they probably already should have in the past. Those tools are extremely powerful and can really boost your productivity if used properly. Although I use Firebug occasionally I have to admit that my main day-to-day tool are the ones provided by Chrome. It is mostly a matter of personal preferences but I find the Chrome Developer tools more appealing for a couple of reasons:
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 DevTools Autosave 1.0.0 is 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.