Development Tools

You can develop JavaScript code pretty much using any editor you want. Given the language has been somewhat loosely typed you won't benefit from an IDE that much. You can, however, improve the experience by using various tools and plugins.

The situation will improve in the future thanks to solutions such as tern that promise to take the editing experience to the next level.

I personally use vim and a couple of JavaScript related plugins. If you are looking for something more commercial, WebStorm and Sublime Text may be interesting alternatives. I am absolutely certain Emacs is a great editor too when configured correctly.

Chrome Inspector and Firebug

These days browsers have very powerful tools in them. I like to use Chrome Inspector a lot. It comes with a simple JavaScript console and allows me to tweak the structure of the page I am editing. Longer term we will see a better integration between Inspector and editors. I cannot await to see that day myself.

Firebug is something more or less equivalent for Mozilla Firefox. There is also a light version available you can embed on your site even. This may be useful for developing on mobile although there are likely better solutions available.

It is very much worth your while to learn to use these tools. They allow you to inspect, modify and learn very fast. They are still quite isolated from actual editors but as I mentioned the future might be more integrated.

LiveReload

As a web developer you have likely hit ctrl-r or a similar shortcut enough. Fret not! You can escape this by using a solution such as LiveReload. By using it the browser will refresh itself. Technically it is quite simple. On browser side you have a plugin which communicates with a server that watches the files you modify. When a file has been modified (and saved) it will trigger refresh. In case of LiveReload changes made to CSS are made on the page without a refresh allowing fast iteration.

I know it might sound like a small thing. In practice small things such as this count, though, and allow you to focus on the essential rather than refreshing the page while you are iterating.

JSLint and JSHint

JSLint and its less opinionated cousin JSHint generate a bunch of warnings. At times these helpers reveal actual issues so you had better take their advice to the heart. I like to use JSHint as it doesn't complain too much but when it's not for nothing. There are plugins available for many editors. It is possible to use the tools as standalone (as a part of your build even).

If you value your time take advantage of these sort of tools. Given JavaScript is so very loose by definition these tools make it a bit less possible to abuse it. You will still run into issues at times but at least these allow you to eliminate some of the most foolish ones. Don't be a fool, use a proper tool.

jsFiddle, jsbin, jsdo.it and co.

Services such as jsFiddle, jsbin and jsdo.it form an entire category of their own. These are development tools that operate directly within your browser. Sometimes I use them to prototyping solutions. Nothing is more fun than the type of interactive development they allow.

The tools are a bit lacking on collaborative department. It is not possible to modify the same code at the same time yet. Also the way they deal with versioning can be a bit interesting. Cloud9 IDE is a solution that aims to fix these problems.

Cloud9 IDE

Web development belongs to web. At least that what the Cloud9 guys seem to believe. Their service integrates well with GitHub and allows you to do more serious development in web. I don't use their service actively but it seems there might be some kind of a future for services such as this. There is something innately powerful in the concept.

Conclusion

In this brief chapter I went through various tools I like to use in my development work. Proper tooling makes a huge difference for a web developer. Besides productivity gains these tools enable development on a different level altogether.