40 JavaScript Tools

Below you will find some tools to help you achieve your goals with JavaScript code. The list was originally a part of the article 100 Ajax And JavaScript Techniques, but then we decided to remove it and publish it separately since we thought the original article would became to extensive and hard to handle.

In this article you will find 40 useful JavaScript Tools with examples (where available) to help you with your coding process - including some JavaScript and AJAX frameworks.

The tools are both browser based and online. IE 8 tools are not so well represented in this list, but every installation of IE 8 comes with the Developer Tools - this introduces you to features of the Developer Tools: Discovering Internet Explorer Developer Tools.

LIST CONTENT

• Browser Based Debugging Tools
• Online Debugging Tools
• JavaScript Testing
• AJAX And JavaScript Authoring Tools
• Editors And IDE
• JavaScript Compressors
• HTTP Monitoring
• JavaScript Documentation Tools
• JavaScript Cheat Sheets
• Miscellaneous

We tried to include example links to every post, but although some of the authors make excellent JavaScript tools they make very poor examples. This means that some of the example links are not of the quality we would wish.

JavaScript Debugging And Testing Tools

Browser Based Debugging Tools

1. Firebug
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
View Example

2. Firebug Lite
Firebug Lite - a JavaScript file you can insert into your pages to simulate some Firebug features in browsers that are not named “Firefox”. Firebug Lite creates the variable “firebug” and doesn’t affect or interfere with HTML elements that aren’t created by itself.
View Example

3. Venkman JavaScript Debugger
Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Mozilla based browsers.
View Example

4. NitobiBug - Browser Based Debugger
It’s 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.
View Example

5. 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.
View Example

6. DebugBar - IE Extension For Web Developers
View DOM Tree and modify tags attributes and CSS attributes on the fly to test your page, view JavaScript functions for easier debugging, CSS inspector and more.
View Example

Top

Online Debugging Tools

7. JS Bin - Collaborative JavaScript Debugging
A web-application specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively. Allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code - new tabs doesn’t) - once you’re happy you can save.
Start Application

8. JSON Formatter And Validator
The JSON Formatter was created to help with debugging. As data expressed as JSON is often written without line breaks to save space, it became extremely difficult to actually read it. This tool hopes to solve the problem by formatting the JSON into data that is easily readable by human beings.
Start Application

Top

JavaScript Testing

9. YUI Test - Testing Framework
YUI Test is a testing framework for browser-based JavaScript solutions. Using YUI Test, you can easily add unit testing to your JavaScript solutions.
View Example

10. JSLint - The JavaScript Code Quality Tool
An online JavaScript program that looks for problems in JavaScript programs. 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.
Start Application

11. FireUnit - JavaScript Unit Testing Extension
FireUnit provides a simple JavaScript API for doing simple test logging and viewing within a new tab of Firebug. FireUnit is a Firefox/Firebug extension.
View Example

12. SugarTest - JavaScript Testing
Makes it easy to write elegant and understandable JavaScript tests. Its API is inspired by both RSpec, Shoulda and jQuery. It works as a DSL running on top of JsUnitTest.
View Example

13. JSpec - JavaScript Testing Framework
JSpec is an extremely small, yet powerful testing framework. Helpful shorthand literals, a very intuitive/readable syntax, as well as not polluting core object prototypes.
View Example

Top

AJAX And JavaScript Authoring Tools

14. Google Web Toolkit - Google Code
Google Web Toolkit (GWT) allows developers to quickly build and maintain complex yet highly performant JavaScript front-end applications in the Java programming language. Write your AJAX front-end in the Java programming language which GWT then cross-compiles into optimized JavaScript that automatically works across all major browsers.
View Example

15. JQuery UI - ThemeRoller
jQuery UI is jQuery’s user interface library - jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual effects that use a jQuery-style, event-driven architecture and a focus on web standards, accessibility, flexible styling, and user-friendly design.
View Example

16. Jx - JavaScript Library
JxLib is a JavaScript library for creating graphical user interfaces based on the MooTools library. The site provides access to the library as well as documentation and examples.
View Example

17. Script# - AJAX And JavaScript Authoring Tool
Script# is a tool that enables developers to author C# source code and subsequently compile it into regular script that works across all modern browsers.
View Example

18. Aptana Jaxer - The JavaScript Server
Aptana Jaxer allows developers to use their AJAX, HTML, JavaScript and DOM knowledge to create server-side-powered Web applications. You have the option of either installing Jaxer as a standalone web server on your computer, or using the Jaxer server that is automatically bundled with Aptana Studio.
View Example

Top

Editors And IDE

19. Komodo Edit - Free Open Source Dynamic Languages Editor
Komodo Edit supports PHP, Python, Ruby, Perl and Tcl, plus JavaScript, CSS, HTML and template languages like RHTML, Template-Toolkit, HTML-Smarty and Django.
View Example

20. Spket IDE - JavaScript Editor
Spket IDE is a toolkit for JavaScript and XML development. The JavaScript editor provides features like code completion, syntax highlighting and content outline that helps developers productively create JavaScript code. Free for non-commercial use.
View Example

21. Aptana Studio
Aptana Studio is a complete web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript, along with thousands of additional plugins created by the community.
View Example

Top

Documentation And Code Optimization

JavaScript Compressors

22. YUI Compressor
The YUI Compressor is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools. Also able to compress CSS files.
View Example

23. ShrinkSafe - The Dojo Toolkit
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 than the regular-expression based tools.
View Example

24. Packer - JavaScript Compressor
One of the most widely used tools to minify JavaScript code is Dean Edwards’ Packer. The packing algorithm is forgiving of all forms of JavaScript with one exception. You must correctly terminate all JavaScript statements with semi-colons.
View Example

Top

HTTP Monitoring

25. Tamperdata - Firefox Extension
View and modify HTTP/HTTPS headers and post parameters, trace and time http response/requests and security test web applications by modifying POST parameters.
View Example

26. 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.
View Example

Top

JavaScript Documentation Tools

27. jGrouseDoc
jGrouseDoc allows developers manage and document code comments using a format similar to Javadoc’s. Allows documenting of JavaScript classes, regardless which approach or framework is being used for it - be it Prototype, Dojo, jGrouse or any other.
View Example

28. JsDoc Toolkit
JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.
View Example

29. ExtDoc- JavaScript Comments Processor
ExtJS library has a specific JavaScript documentation style - ExtDoc parses JavaScript source files and creates template-based output. Support for custom tags and fully templated output.
View Example

Top

JavaScript Cheat Sheets

30. JQuery 1.3 Visual Cheat Sheet
jQuery Visual Cheat Sheet is a practical reference to jQuery 1.3 for web designers and developers. This cheat sheet contains the full jQuery API reference with detailed descriptions and some sample code.
View Example

31. jQuery Selectors
Understanding jQuery selectors is the key to using the jQuery library most effectively. This reference card puts the power of jQuery selectors at your very fingertips.
View Example

32. jQuery 1.3 Cheatsheet
This cheat sheet is a quick reference by Oscar Otero to functions and properties in the jQuery 1.3 library.
View Example

33. MooTools 1.2 Cheat Sheet
It includes documentation for Core, Native, Class, Element, Utilities and Request.
View Example

34. Prototype 1.6.0.2 Cheat Sheet
Prototype cheat sheet released by kangax - a full reference.
View Example

35. Dojo 1.3 Base API Cheat Sheet
A cheat sheet designed by Kyle Hayes but with full API generation by phiggins over at #dojo - fully compatible with Dojo 1.3.
View Example

36. JavaScript Cheat Sheet
A quick reference guide for JavaScript, listing methods and functions, and including a guide to regular expressions and the XMLHttpRequest object.
View Example

Top

Miscellaneous

37. DamnIT - A Free JavaScript Error Reporting Service
DamnIT makes it simple for beta testers to provide useful feedback by prompting them after an error occurs and combining their response with error message, file, line number, and back-trace information. You’ll receive detailed automated error information instead of vague bug descriptions.
View Example

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

39. HTML To JavaScript Convertor
The online 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.
Start Application

40. Glimmer - JQuery Interactive Design Tool
Glimmer allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios.
View Example

41. Jsfuzzer -Browser Based JavaScript Fuzzer
This fuzzing tool allows fuzzing of events, tags, styles and HTML attributes. You can use incomplete tags with various depth and randomize case of all parameters. It also contains a database of all new attack vectors gathered.
View Example

42. JavaScripTools
JavaScripTools is a set of JavaScript components, functions and classes to make the web developer’s life easier. Most modern browsers, like Firefox, Internet Explorer, Opera and Konqueror are supported.
View Example

43. JavaScript Tools Guide - PDF By Adobe Systems
This document provides information about the JavaScript features, tools, and objects that are common to all Adobe applications that support JavaScript.
View Example

Top

The resources are not in any particular order and as usual you decide what resource fits best for your purposes. Cashrevelations.com is not affiliated with any of the authors.

• Part One: 100 Ajax And JavaScript Techniques