Over a million developers have joined DZone.

Know Your Tools: Become a JavaScript Power-Developer

· Web Dev Zone
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+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. If you'd like to take a look at my personal collection of gimmicks, here I'll add stuff when I find them.

Topics:

Published at DZone with permission of Juri Strumpflohner, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}