List of Really Useful Free Tools For JavaScript Developers

JavaScript has a critical role in modern web development; JavaScript frameworks like jQuery, MooTools, Prototype, etc and other JavaScript libraries have made our lives significantly easy. However with emergence of Rich Internet Applications(RIA) and their rapid adoption, the need to write more powerful, robust and reliable JavaScript is constantly rising.

Whether you are a JavaScript novice or an experienced developer; tools that you use have direct impact on your productivity. Thanks to open source movement, owning great tools doesn’t mean you have to spend a fortune; actually you may not even need to spend anything. Here is a list of really useful free tools for JavaScript developers.

Testing

  • JSLint – The JavaScript Verifier
    JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.
  • JsUnit
    JsUnit is a Unit Testing framework for client-side (in-browser) JavaScript. It is essentially a port of JUnit to JavaScript. Also included is a platform for automating the execution of tests on multiple browsers and multiple machines running different OSs.
  • YUI Test
    YUI Test is a testing framework for browser-based JavaScript solutions. Using YUI Test, you can easily add unit testing to your JavaScript solutions.
  • Obtrusive JavaScript Checker
    Available as a Firefox extension, Greasemonkey user script, as well as a Ubiquity command; Obtrusive JavaScript Checker is a tool to traverse through all elements in a web page, and when it finds a HTML element with inline events (which is bad, JavaScript should be unobtrusive), it highlights it with a red border.
  • Crosscheck
    Crosscheck is an open source testing framework for verifying your in-browser JavaScript. It helps you ensure that your code will run in many different browsers such as Internet Explorer and Firefox, but without needing installations of those browsers.
  • JSLitmus
    JSLitmus is a lightweight tool for creating ad-hoc JavaScript benchmark tests.
  • JavaScriptMVC’s Test Plugin
    Testing library for JavaScriptMVC that provides event simulation, unit testing, Ajax fixtures, and a console.

Debugging

  • Javascript Debug Toolkit
    JavaScript Debug Toolkit is a an eclipse plugin to debug JavaScript cross browser,it can debug JavaScript in IE,Firefox,Safari,Chrome,Opera and even in mobile browser.
  • Firebug
    One of the post popular web developer tool – Firebug is a Firefox add-on that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. It provides JavaScript logging and debugging console with useful features such as AJAX requests logging, JavaScript interpreter, DOM explorer and more. You can use Firebug Lite in IE, Opera, and Safari.
  • Venkman
    Venkman provides a powerful JavaScript debugging environment for Gecko-based browsers. The debugger is available as an add-on for Firefox & Mozilla. Venkman is both a graphic and a console debugger. Features such as breakpoint management, call stack inspection, and variable/object inspection are available from the user interface and from console commands, letting you work in the way you are most accustomed to.
  • NitobiBug
    NitobiBug is a browser-based JavaScript object logger and inspection tool – similar to Firebug. NitobiBug runs across different browsers (IE6+, Safari, Opera, Firefox) to provide a consistent and powerful tool for developing rich Ajax applications.
  • DamnIT
    DamnIT is a free service that emails you when a user encounters a JavaScript error in your web page.
  • JS Bin
    JS Bin is an online  web application specifically designed to help JavaScript developers test code snippets within some context, and debug the code collaboratively. JS Bin allows you to online edit and test JavaScript and HTML code. Once you’re done you can save, and send the URL to a peer for review or help.
  • Blackbird
    A lot of JavaScript developers simply use alert() to show various messages in order to debug their code. Blackbird offers a simple way to log messages in JavaScript and an attractive console to view and filter them.

HTTP Monitoring

  • Fiddler
    Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data.
  • TamperData
    TamperData is a Firefox extension to track and modify http/https requests. You can use it for security testing of Web based applications and tracking request/responses.
  • Live HTTP Headers
    Allows you to view HTTP headers of a page while browsing. You can use Live HTTP Headers for debugging web application, find out which kind of web server the remote site is using, and see cookies sent by remote site.

Documentation

  • jGrouseDoc
    jGrouseDoc allows generation of API documentation from the comments in the source code. The tool allows you to document all the necessary constructs that you might need – not only functions and variables, but also classes, interfaces, namespaces, packages and others. And it does not matter at all which JavaScript frameworks are being used – you can document your code the way you want it, not the way it is being imposed by a framework or a tool.
  • JSDoc Toolkit
    A documentation generator for JavaScript. Written in JavaScript; it automatically generates template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.

Compression

  • Online Javascript Compression Tool
    An online JavaScript compressor that allows you to compress your JavaScript files using a few different compression algorithms like JSMin and Packer. Compressed JavaScript files are ideal for production environments since they typically reduce the size of the file by 30-90%.  Most of the filesize reduction is achieved by removing comments and extra whitespace characters that are not needed by web browsers or visitors.
  • Scriptalizer
    An Online tool that combines multiple JavaScript files into one.
  • Dojo ShrinkSafe
    A Java command line utility that allows you to reduce the size, and therefore latency, of JavaScript by browsers. Instead of brittle regular expressions, the Dojo compressor is based on Rhino, a JavaScript engine from the Mozilla project. Being based on a real parse stream, the Dojo compressor can get a better idea for the context of a token (variable name, etc.) than the regular-expression based tools.
  • YUI Compressor
    The YUI Compressor is a JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as ‘eval’ or ‘with’ (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%.

Formatting

  • JavaScript Beautifier
    This beautifier can process your messy or compacted JavaScript, making it all neatly and consistently formatted and readable.

Editors & IDE

  • Aptana Studio
    Aptana Studio is a complete web development environment that provides JavaScript code completion and debugging, HTML/CSS/JavaScript code assist, and support for all the leading Ajax libraries. Aptana Studio even provides code assist for any JavaScript in your page – including your own!
  • Komodo Edit
    Komodo Edit is a free – open source editor that provides auto complete, call tips, multi-language file support, syntax coloring, syntax checking, Vi emulation, Emacs key bindings, and more. One of the most useful feature is ability to extend Komodo Edit. You can find numerous extensions useful for JavaScript developers (e.g., JSLint plugin for KomodoVenkman JavaScript Debugger, etc).
  • Spket IDE
    Spket IDE is powerful toolkit for JavaScript and XML development. The powerful editor for JavaScript, XUL/XBL and Yahoo! Widget development. The JavaScript editor provides features like code completion, syntax highlighting and content outline that helps developers productively create efficient JavaScript code. Spket IDE is free for non-commercial use.

Other Tools

  • Google’s AJAX APIs Playground
    The AJAX API Playground is loaded with samples for Google JavaScript APIs (Maps, Search, Feeds, Calendar, Visualization, Language, Blogger, Libraries and Earth, etc) that you can edit and run to help you explore what Google’s APIs have to offer. There are also save and export features. The save feature allows you to hold onto an edited sample so you can continue working on it later, while export lets you modify a sample and publish the code to a permanent URL.
  • QuirksMode – Compatibility Tables
    Most popular source to check compatibility status of major web browsers for CSS2, CSS3, DOM Core, DOM HTML, DOM CSS, DOM Events and CSS Object Model View.
  • HTML to JavaScript Convertor
    The HTML to JavaScript convertor takes your markup and converts it to a series of document.write() statements that you can use in a block of JavaScript.
  • Glimmer
    Glimmer is a desktop application that allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. It allows you to easily create interactive experiences like rotating photo-galleries/mastheads,drop-down navigation, hover effects, or custom animations.
  • jQuery Function Builder
    You can use this tool to quickly build up a collection of functions that will be called when the page has loaded/is ready.
  • JavaScript Regex Generator
    An online tools for creating regular expression

Other Browser Extensions

  • Web Developer Extension For Firefox, Flock & Seamonkey
    The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools including ability to validate your XHTML, find JavaScript/CSS errors, visualize a web page’s structure, testing web forms, change XHTML on-the-fly, inspect HTTP headers information, etc.
  • Opera Dragonfly
    Opera Dragonfly is a cross device, cross platform debugging environment for the Opera browser—debug JavaScript, inspect and edit CSS and the DOM, and view any errors on your mobile or computer.
  • Developer Toolbar For IE6/7
    The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages

Cheat Sheets

About these ads

About Saran

Hello there!!! I'm Saravanan, born and living in India. The main reason i decided to start this project it was because there should be a way to transfer my knowledge which i experimented in flash to all. i try to concentrate as much as possible all kind of issues can appear to someone is developing an Flash application. If you need help, or if you would like to see in this blog some issues, send me an e-mail to rksaran@rediffmail.com Follow Me: twitter:http://twitter.com/rksaran Best Regards, SRK
This entry was posted in JavaScript. Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s