- New! Updated list: 60 Effective 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.
- 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
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
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
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
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
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
Documentation And Code Optimization
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
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
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
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
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
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
What a lovely article. I spend days on the internet reading blogs, about tons of different subjects. I have to first of all give kudos to whoever created your theme and second of all to you for writing what i can only describe as an unbelievable post. I honestly believe there is a skill to writing articles that only a few posses and frankly you have it. The combination of informative and quality content is definitely extremely rare with the large amount of blogs on the internet.
Hello,
Very nice list! Its nice to have a list of tools all in one place that help you with web dev/web design. One tool I would add to the existing list, is AllWebMenus. It is a very good JavaScript menu maker. The company also has jQuery based tools, for creating modal windows, html tooltips, etc.
If you want you can take a look at their site Likno.com
JB
[...] 40 JavaScript Tools – [...]
[...] performant JavaScript front-end applications in the Java programming language. [...]