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
Know Your Tools: Become a JavaScript Power-Developer
5 min read
One of the issues classical web developers have when diving into the rich JavaScript apps world is their tooling. They are accustomed to work in fully integrated environments where you fire up a webserver, you directly set breakpoints and live-inspect the state of the app. With JavaScript RIAs things change a little, browser interaction increases, coding is done in your favorite IDE, debugging in the browser. This kind of mind switch is often difficult and feels uncomfortable. But it hasn't to, JavaScript tools get increasingly better.
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
Syntax coloring on the JavaScript and CSS editors
Elegant code navigating with the keyboard
Tabbed JavaScript source code viewer
Prettyprint functionality for compressed source code
Integrated DOM query selectors
...
These are just some of them, but beside those, one of the more remarkable and valuable features is the live editing of loaded JavaScript files. The integrated JavaScript source code panel allows you to not only view, debug and inspect your JavaScript code, but also to instantly make changes from within the code panel itself.
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??
Auto-Save
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
Enabling Routing
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.
But beside changing JavaScript files, what's even more handy are the CSS file changes. You can live inspect the changes of modifications in your browser and simultaneously the're saved to your real CSS files on the FS as well. Huge win!!
Tincr
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.
:O. Just kidding ;), although I'd strongly suggest you to take a look at Node as JavaScript web dev. Anyway, from the AutoSave Devtools page I found Tincr. The difference? Not so much, except that you don't have to startup a separate server, but instead everything is handled by the Chrome extension itself.
The Routing
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.
That's it.
Conclusion
We've seen that JavaScript tools get better and better, so keep an eye on what's happening on the web. Brackets for instance is another editor heavily pushed by Adobe that emerged recently and which looks very promising. Large companies are doing major investments. Paul Irish - Chrome Developer Evangelist - publishes a lot of great videos about getting more productive with the Devtools.
