10 Online Tools to Help You Write Better JavaScript

JSLint shows you where your code has problems.

JSLint, created by JavaScript super-genius Douglas Crockford, is a code checker that is designed to tell you where your code has problems — and not just the kind of problems that would generate errors.

JSLint will tell you about things that thousands of JavaScript programmers do all the time, but that are problematic for one reason or another. If your code passes JSLint’s tests, it’s probably some pretty good code.

JSFiddle.net is a complete JavaScript playground.

JSFiddle is an online program for running web applications in a test environment. When you go to JSFiddle.net, the first thing you see is a grid with four panes:

• One for HTML

• One for CSS

• One for JavaScript

• One for Results

Enter the appropriate type of code into any of the first three boxes and press the Run button, and the results will be displayed in the Results pane.

With JSFiddle, you can even save your fiddles and email the urls to other people to check out.

Collaborate with JSBin.

JSBin is a code-sharing site that allows you to write code while other people watch you. Whether you have exhibitionist tendencies, you’re teaching a junior developer, or you’re collaborating with other programmers on a project, the functionality in JSBin can be very helpful for working out bugs, getting feedback, and sharing code.

javascriptcompressor.com makes files smaller.

The smaller your JavaScript files are, the faster they’ll load. JavaScriptCompressor.com has a window where you can drop your JavaScript. When you press Compress, a new version that’s functionally the same as your original code, but compressed, shows up in the lower window. Not only does the compressed code take up less disk space and bandwidth, it’s also obfuscated, to hide its inner secrets from prying eyes.

Make your code prettyy.

JSBeautifier is an online tool that takes your sloppy JavaScript and makes it pretty. Some of the techniques that it uses to beautify code include

• Inserting new lines

• Breaking lines of chained code

• Inserting spaces before conditional statements

• Making indentations standard throughout the script

Point and click regular expressions.

JavaScript Lab’s JavaScript RegEx Generator is a user-friendly form for pointing and clicking your way to writing regular expressions. Simply click some buttons, enter text to match, set some options, and your regular expression shows up at the bottom.

The JSON formatter validates and arranges JSON data.

The JSON formatter and validator allows you to paste in unformatted JSON code, such as the code you would get from copying from the Chrome Developer Tools. It then makes the code pretty and makes sure that it’s valid.

JShint detects problems with your code as you write it.

JShint is a tool that helps you detect errors and potential problems in your JavaScript. In addition, it will give you useful information about your JavaScript code as you write it.

Mozilla Developer Network is one of the best JavaScript references.

The Mozilla Developer Network’s JavaScript section is an essential resource for information about everything having to do with JavaScript. Its JavaScript resources include reference material, tutorials, articles, and demos for programmers at every level.

Douglas Crockford’s JavaScript videos.

Douglas Crockford is a hero to many JavaScript programmers. His website has a great collection of free videos on every aspect of JavaScript. These videos are essential to a programmer who is looking to move past beginner and into the more advanced levels of JavaScript expertise.