A correct and qualified set of development tools will save you from many tedious and time consuming tasks. And why make your work more difficult, when there are tools to achieve your goals so much easier and less painful? Below you find some JavaScript tools that will make your work faster and more effective – something your customers will appreciate.
Many of the tools in this list require a Firefox browser. If you by some reason don’t have it installed it on your computer, you can download the Firefox Browser right HERE.
In this article Cashrevelations.com presents 60 effective and useful JavaScript Tools to help you with your development process and save you a lot of time.
- AJAX And JavaScript Authoring Tools
- JavaScript Toolkits
- Browser Based Debugging Tools
- Online Debugging Tools
- JavaScript Testing
- JavaScript Compressors
- HTTP Monitoring
- JavaScript Documentation Tools
- JavaScript Cheat Sheets
- Miscellaneous
This article is an update from our earlier article 40 JavaScript Tools, with some additions. We have divided the tools into groups only to make it easier to search through the list – these groups do not represent any absolute classification of the tools.
AJAX And JavaScript Authoring Tools
1. 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.
2. 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.
3. 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.
4. 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.
5. Qooxdoo – Framework
Qooxdoo is a framework for creating rich internet applications (RIAs). It includes a platform-independent development tool chain, a state-of-the-art GUI toolkit and an advanced client-server communication layer.
6. WaveMaker – Development Platform
WaveMaker (formerly ActiveGrid) is an open source software development platform that automates much of the process for creating Java web and cloud applications.
7. 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.
8. 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.
9. 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.
10. Clean AJAX
Clean AJAX is an open source, cross-browser Ajax engine, inspired by Java Message Service, that uses messages to control the requests.
11. SproutCore
SproutCore is an HTML5 application framework for building responsive, desktop-caliber apps in any modern web browser, without plugins.
12. The Dojo Toolkit – Unbeatable JavaScript Tools
Dojo Toolkit is a modular JavaScript library (JavaScript toolkit) designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites.
13. 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.
14. 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.
15. JSX Toolkit – Javascript Toolkit
JSX is unlike other JavaScript toolkits by providing core OO functionality rather than web enhancements. JSX makes your code cleaner and empowers true OO JavaScript applets.
JavaScript Debugging And Testing Tools
16. 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.
17. 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.
18. 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.
19. 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.
20. 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.
21. 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.
22. CJS – Companion.JS JavaScript Debugger
CJS is a Javascript debugger for Internet Explorer. Detailed JavaScript error reporting (call stack and real file name where the error occurred) and “Firebug”-like Console API feature.
23. JSDT – Javascript Debug Toolkit
JSDT is a software that can debug JavaScript in IE, Firefox, Safari, Chrome, Opera, mobile IE browser and mobile Opera browser. It works in all browsers that support Ajax.
24. 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.
25. 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.
26. Pastebin – Collaborative Debugging Tool
Pastebin is a collaborative debugging tool allowing you to share and modify code snippets while chatting on IRC, IM or a message board.
27. 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.
28. QUnit – JavaScript Test Suite
QUnit is an easy-to-use JavaScript test suite. It’s used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code.
29. 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.
30. 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.
31. 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.
32. 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.
33. 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.
34. Blue Ridge – JavaScript Testing Framework
The Plugin adds support for command-line and in-browser JS unit tests to your Rails app. It bundles several great tools together in a convention-over-configuration, Rails-like way.
Documentation And Code Optimization
35. Javascript Compressor
This handy online tool, based on an algorithm by Dean Edwards, compresses and obfuscates Javascript code. Files are usually compressed between 50-70 percentage.
36. 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.
37. 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.
38. JS Minifier
JS Minifier is a web based tool for shrinking by removing comments and unnecessary whitespace from your JavaScript code to make it as lightweight as possible.
39. The JavaScript CompressorRater
With this online tool by Arthur Blake you can get compression statistics for a variety of popular compressors – helps you to determinate which JavaScript compressor is the best.
40. Live HTTP Headers
With this Open Source tool (Firefox plugin) from Mozilla you can view HTTP headers of a page while you are browsing. Compatible with Firefox 3.6 and Seamonkey 2.0.
41. 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.
42. 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.
JavaScript Documentation Tools
43. 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.
44. 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.
45. 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.
46. Snippely – Text And Code Organizational Tool
Snippely is a basic text and code organizational tool. Instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize “snippets” in one convenient location.
JavaScript Cheat Sheets
47. 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.
48. 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.
49. jQuery 1.3 Cheatsheet
This cheat sheet is a quick reference by Oscar Otero to functions and properties in the jQuery 1.3 library.
50. MooTools 1.2 Cheat Sheet
It includes documentation for Core, Native, Class, Element, Utilities and Request.
51. Prototype 1.6.0.2 Cheat Sheet
Prototype cheat sheet released by kangax – a full reference.
52. 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.
53. JavaScript Cheat Sheet
A quick reference guide for JavaScript, listing methods and functions, and including a guide to regular expressions and the XMLHttpRequest object.
54. gotAPI – Instant Search In Developer Documentation
Handy quick reference search for JavaScript and HTML (including HTML, CSS, JavaScript, AJAX, Web2.0) and other software/technologies.
55. QuicklyCode – Cheat Sheets And Programming Stuff
This website links you to various cheat sheets and other developer resources to aid you in your programming, including JavaScript and other applications.
Miscellaneous
56. JavaScript Regex Generator
User-friendly regex (regular expression) generator that is still in Beta. Currently limited to 7 groups and no support for negating character classes.
57. Processing.js
Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets.
58. Online JavaScript Beautifier
This beautifier can process your messy or compacted JavaScript, making it all neatly and consistently formatted and readable.
59. Closure Templates
Closure Templates are an easy-to-use template system for Java and JavaScript. Closure Templates are used extensively in Google apps, including Gmail and Google Docs.
60. 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.
61. 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.
62. 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.
63. 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.
The JS 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.
- More JavaScript: 150 JavaScript Techniques
[...] 60 Effective JavaScript Tools [...]
[...] 60 Effective JavaScript Tools http://cashrevelations.com/magazine/2010/04/effective-javascript-tools/ This entry was posted in Web and tagged javascript. Bookmark the permalink. ← [...]