Smashing Magazine

50 Useful JavaScript Tools

• By Jacob Gube
• February 8th, 2009
• JavaScriptResourcesTools
• 48 Comments

By Jacob Gube

JavaScript is a powerful client-side scripting language used in many modern websites and Web applications. In the hands of a skilled Web developer, JavaScript can enhance the user’s experience of the website and provide rich interactive components and features. But even though syntactically simple in nature, JavaScript is often difficult to author because of the environment it runs in: the Web browser. JavaScript’s popularity is evident in emerging technologies, such as Adobe AIR¹, which use it as a supported language for creating desktop-based applications.

Below, you’ll find 50 excellent tools to help you achieve various tasks involved in authoring JavaScript code. You’ll find useful tools to speed up your coding processes, including debugging tools to hunt down places where your scripts break, unit testing and validation tools to test your scripts in various situations, security vulnerability scanners and code optimization tools to make sure your scripts are light as a feather.

You’ll also find a few new and alternative JavaScript and AJAX frameworks to help you explore options beyond the big names (i.e. MooTools, jQuery, YUI, Dojo, Prototype), in addition to useful scripts to help you accomplish a host of design and development tasks related to JavaScript.

Also, be sure to check out the following related posts:

• 75 (Really) Useful JavaScript Techniques²
• 60 AJAX- and Javascript Solutions For Professional Coding³
• jQuery and JavaScript Coding: Examples and Best Practices⁴
• 50 Extremely Useful And Powerful CSS Tools⁵

JavaScript/AJAX Authoring Tools Link

• jQuery UI⁶
  The jQuery UI allows you to design custom user interfaces for Web applications using the jQuery⁷ library. With jQuery UI, you can reduce the amount of code you write for common rich interactive features and website widgets. Be sure to check out the jQuery UI Demo⁸ page, which showcases some of the things you can accomplish using jQuery UI.

  ⁹

• Google Web Toolkit¹⁰
  The Google Web Toolkit (commonly referred to as GWT) is a framework for developing complex and fully featured AJAX-based Web applications. You write front-end code in Java that is later compiled into optimized and cross-browser-friendly JavaScript. GWT puts the focus on Web application development by reducing the need for testing and debugging JavaScript for browser quirks.
• Jx¹¹
  Jx is a JavaScript library for creating graphical user interfaces written on top of the MooTools¹² framework. Jx is distributed with an MIT license¹³ and is well documented. Numerous examples as well as thorough and well-organized API documentation is available on the website.

  ¹⁴

• Freestyle Webtop Toolkit
  Freestyle aims to reduce the complexity and time involved in deploying Web-based user interfaces by eliminating the separation of client-side and server-side development. With Freestyle, you focus on programming logic and UI design, and it handles the rest (i.e. cross-browser compatibility and DHTML and AJAX development).

  

• Script#
  Script# is an AJAX and JavaScript authoring tool that allows developers to write in C#. It also allows .NET developers to leverage their existing knowledge and provides powerful tools associated with the .NET framework.

  

• Aptana Jaxer
  Aptana Jaxer is the first “AJAX server” that allows developers to use their AJAX, HTML, JavaScript and DOM knowledge to create fully featured server-side-powered Web applications. With Jaxer, you can even write database queries in JavaScript syntax. Jaxer integrates very well with popular JavaScript libraries such as jQuery, Dojo¹⁵ and Ext JS¹⁶.
• JS Regex Generator
  JS Regex Generator helps JavaScript developers write Regular Expressions¹⁷ for matching strings of text. This is commonly done for text-format validation, such as when checking if inputted text has the correct date and email format.

  

• WaveMaker¹⁸
  WaveMaker is open-source software for complete Web application development and deployment. You can find a host of demo applications built and deployed using WaveMaker on the Demo Applications¹⁹ page.

  ²⁰

Documentation Tools Link

• JSDoc Toolkit²¹
  JSDoc Toolkit makes code documentation a breeze. Written in JavaScript, it helps developers automatically generate templates for JavaScript comments. It’s a great tool for managing large-scale applications developed by teams of developers who have different coding styles.
• jGrouseDoc²²
  jGrouseDoc is an open-source project distributed through Google Code²³ under a modified BSD license. It lets developers document and manage their code comments using a format similar to Javadoc²⁴‘s.

  ²⁵

JavaScript Debugging Tools Link

• Firebug²⁶
  Firebug is an extremely popular and well-regarded front-end debugging tool. It has all the features you’d expect from a JavaScript debugging tool, such as the ability to set breakpoints in your code so that you can step through your script. For people developing outside of Mozilla-based browsers, check out Firebug Lite²⁷, which is a JavaScript library you can include in your Web pages to access some of the features of Firebug.

  ²⁸

• Venkman JavaScript Debugger
  Venkman is Mozilla’s JavaScript debugger and an add-on for Gecko-based browsers. Venkman is a robust and fully featured JavaScript debugging environment, with a host of useful features and options, such as code profiling to inspect your script’s performance.

  

• Drosera²⁹
  Drosera is an excellent debugging tool for Safari and WebKit-based browsers.

  ³⁰

• Opera Dragonfly³¹
  Opera Dragonfly is a robust debugging environment for the Opera browser. Dragonfly allows you to view and inspect errors, debug your scripts and inspect and edit the DOM and CSS on the fly.
• NitobiBug
  NitobiBug is a browser-based JavaScript object logger and inspector. It runs on numerous browsers, including IE, Safari, Opera and Firefox. It is a powerful tool in helping developers build rich interactive AJAX applications.
• DebugBar³²
  DebugBar is an in-browser front-end debugger for Internet Explorer. Much like its Firefox counterparts, it has a robust set of features, such as DOM, JavaScript and cookie inspection. Be sure to check out Companion JS³³, which is a JavaScript debugging library to be used alongside DebugBar.

  ³⁴

• Internet Explorer Developer Toolbar³⁵
  Similar to Firebug, IE Developer Toolbar is an in-browser tool to help you debug front-end code in Internet Explorer. It’s especially handy as a debugging and inspection alternative to Firefox when you’re developing and testing in IE.

JavaScript Testing and Validation Tools Link

• Test – JavaScriptMVC
  Test is a JavaScriptMVC component for easily setting up automated unit testing for JavaScript code. It lets you effectively test for DOM events (such as a key press or form submission), thereby lessening development time, oversight and errors associated with manual testing.

  

• JsUnit³⁶
  JsUnit is a popular unit testing framework for JavaScript code. It’s a JavaScript port from another unit testing framework for Java called JUnit³⁷. JsUnit allows you to write test cases and provides tools for automated code execution.
• JSLint³⁸
  JSLint is a Web-based tool for verifying your JavaScript code for errors. It has a ton of features and settings that you can use to customize verification algorithms to suit your needs.

  ³⁹

• Crosscheck
  Crosscheck is an open-source testing framework for JavaScript. Crosscheck is unique because it works independent of environment: you can run tests outside of a Web browser, which avoids discrepancies that occur when testing in various browsers.
• YUI Test⁴⁰
  YUI Test is a suite of testing utilities that’s part of the YUI library⁴¹ developed by Yahoo!. It has numerous features, such as easy creation of test cases through an intuitive syntax, advanced failure detection and the ability to organize test cases by grouping them into test suites.

  ⁴²

• J3Unit⁴³
  J3Unit is an excellent object-oriented unit-testing framework for JavaScript. It gives you a host of options for writing automated test cases and has three modes: Static Mode⁴⁴, Local Browser Mode⁴⁵ and Remote Browser Mode⁴⁶.
• Regular Expression Tool⁴⁷
  The Regular Expression Tool is an online utility that allows you to test your RegEx code against a sample test. It’s a handy tool to have around when you want to quickly test the efficacy of your regular expressions in a variety of example texts.

  ⁴⁸

• JavaScript Regular Expression Tester⁴⁹
  This is another handy tool for testing regular expressions within the Web browser.

  ⁵⁰

• JSLitmus⁵¹
  JSLitmus is a lightweight tool for creating JavaScript benchmarks and performance tests, using an intuitive API.

  ⁵²

Security Tools Link

• AttackAPI⁵³
  AttackAPI is a framework for writing test cases of potential JavaScript exploits and vulnerabilities.
• jsfuzzer⁵⁴
  jsfuzzer is a fuzzing⁵⁵ tool to help you write (and test for) attack vectors in JavaScript.

New and Alternative JavaScript and Ajax Development Frameworks Link

• Clean AJAX⁵⁶
  Clean AJAX is an open-source framework for creating AJAX-based applications. Check out the demo page to see it in action.

  ⁵⁷

• SAJAX⁵⁸
  SAJAX is an excellent toolkit for developing AJAX-based applications. It supports PHP, Perl and Python.

  ⁵⁹

• JavaScriptMVC⁶⁰
  JavaScriptMVC is a Web application framework based on the MVC⁶¹ software architectural pattern. It speeds up Web development processes and lays down best practices, maintainability and standards as principles in a project’s development.
• qooxdoo⁶²
  qooxdoo is a simple and intuitive AJAX application framework. Be sure to check out the Demo Browser⁶³, a Web-based application that allows you to view demos of qooxdoo at work.

  ⁶⁴

• SimpleJS
  SimpleJS is a small and lightweight JavaScript library that provides developers with useful JavaScript functions for working with AJAX.

Image Manipulation and Graphing Link

• Reflection.js
  Reflection.js automatically adds reflections to your images unobtrusively. Also check out instant.js⁶⁵, a similar script that adds an image border and tilts images on a Web page.

  

• typeface.js
  typeface.js allows you to embed custom fonts on Web pages, freeing you from having to create images for HTML text.
• CanvasGraph.js⁶⁶
  CanvasGraph.js is a simple JavaScript library that lets you construct bar, line and pie charts using HTML’s canvas element.

  ⁶⁷

• flot⁶⁸
  flot is a JavaScript library for plotting data and has been tested to work in most modern Web browsers.

  ⁶⁹

• JavaScript Diagram Builder⁷⁰
  The JavaScript Diagram Builder is a JavaScript library that consists of a variety of objects and functions for constructing diagrams.

  ⁷¹

• The Dojo Charting Engine
  The Dojo Charting Engine is a robust utility for creating components for data visualization, written on top of the Dojo Toolkit⁷².

Useful Utilities and JavaScript Scripts Link

• Processing.js⁷³
  Processing.js is a JavaScript port of Processing⁷⁴, the open-source data-visualization programming language. Check out examples that use Processing.js⁷⁵.
• AJAX Libraries API⁷⁶
  Google’s AJAX Libraries API allows you to serve popular JavaScript libraries using its CDN, which reduces the server load on your website.
• DamnIT
  DamnIT is an error-reporting service that allows you to gather feedback from beta testers after they’ve encountered a JavaScript error. This is perfect for live production testing and as a monitoring tool that helps you track errors and weak spots in your Web applications.
• ie7-js⁷⁷
  ie7-js is a JavaScript library that forces Internet Explorer to behave like a standards-based browser (like Firefox or Opera). It automatically fixes IE browser quirks and deviations from Web standards, as in the case of its box model.
• Lazy loader⁷⁸
  Lazy loader is a jQuery plug-in that delays the loading of images so that text content can load first, thereby making image-heavy pages load faster.

JavaScript Code Optimization and Minification Tools Link

• JS Minifier⁷⁹
  JS Minifier is a Web-based tool for shrinking your JavaScript code to make it as lightweight as possible.

  ⁸⁰

• JSMIN⁸¹
  JSMIN is a popular JavaScript minifier that removes unneeded characters (like spaces and tabs) and comments, thus reducing your script’s file size.
• YUI Compressor⁸²
  The YUI Compressor is another well-regarded JavaScript code-optimization tool developed by Yahoo!.
• Scriptalizer⁸³
  Scriptalizer is a helpful online tool for combining JavaScript files to reduce HTTP requests.

  ⁸⁴

• ShrinkSafe
  ShrinkSafe is a compression tool that reduces JavaScript file sizes.
• SlickSpeed Selectors Test
  SlickSpeed is a Web page for comparing the performance of the DOM object selection of various popular frameworks like MooTools and jQuery.

  

(al)

Footnotes Link

1. 1 http://livedocs.adobe.com/labs/air/1/jslr/
2. 2 https://www.smashingmagazine.com/2008/09/11/75-really-useful-javascript-techniques/
3. 3 https://www.smashingmagazine.com/2008/04/15/60-more-ajax-and-javascript-solutions-for-professional-coding/
4. 4 https://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
5. 5 https://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/
6. 6 http://ui.jquery.com/themeroller/
7. 7 http://jquery.com/
8. 8 http://ui.jquery.com/demos/
9. 9 http://ui.jquery.com/themeroller/
10. 10 http://code.google.com/webtoolkit/overview.html
11. 11 http://jxlib.org/
12. 12 http://mootools.net/
13. 13 http://www.opensource.org/licenses/mit-license.php
14. 14 http://jxlib.org/
15. 15 http://www.dojotoolkit.org/
16. 16 http://extjs.com/
17. 17 http://en.wikipedia.org/wiki/Regular_expression
18. 18 http://www.wavemaker.com/
19. 19 http://www.wavemaker.com/product/demos.html
20. 20 http://www.wavemaker.com/
21. 21 http://code.google.com/p/jsdoc-toolkit/
22. 22 http://jgrouse.com/#jgdoc
23. 23 http://code.google.com/p/jgrousedoc/
24. 24 http://java.sun.com/j2se/javadoc/
25. 25 http://jgrouse.com/#jgdoc
26. 26 http://getfirebug.com/
27. 27 http://getfirebug.com/lite.html
28. 28 http://getfirebug.com/
29. 29 http://webkit.org/blog/61/introducing-drosera/
30. 30 http://webkit.org/blog/61/introducing-drosera/
31. 31 http://www.opera.com/dragonfly/
32. 32 http://www.debugbar.com/
33. 33 http://www.my-debugbar.com/wiki/CompanionJS/HomePage
34. 34 http://www.debugbar.com/
35. 35 http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
36. 36 http://www.jsunit.net/
37. 37 http://www.junit.org/
38. 38 http://jslint.com/
39. 39 http://jslint.com/
40. 40 http://developer.yahoo.com/yui/yuitest/#start
41. 41 http://developer.yahoo.com/yui/
42. 42 http://developer.yahoo.com/yui/yuitest/#start
43. 43 http://j3unit.sourceforge.net/
44. 44 http://j3unit.sourceforge.net/#static
45. 45 http://j3unit.sourceforge.net/#local
46. 46 http://j3unit.sourceforge.net/#remote
47. 47 http://erik.eae.net/playground/regexp/regexp.html
48. 48 http://erik.eae.net/playground/regexp/regexp.html
49. 49 http://www.codeproject.com/KB/scripting/regex2.aspx
50. 50 http://www.codeproject.com/KB/scripting/regex2.aspx
51. 51 http://broofa.com/Tools/JSLitmus/
52. 52 http://broofa.com/Tools/JSLitmus/
53. 53 http://www.gnucitizen.org/blog/attackapi/
54. 54 http://code.google.com/p/jsfuzzer/
55. 55 http://en.wikipedia.org/wiki/Fuzz_testing
56. 56 http://clean-ajax.sourceforge.net/
57. 57 http://clean-ajax.sourceforge.net/
58. 58 http://www.modernmethod.com/sajax/index.phtml
59. 59 http://www.modernmethod.com/sajax/index.phtml
60. 60 http://javascriptmvc.com/
61. 61 http://en.wikipedia.org/wiki/Model-view-controller
62. 62 http://qooxdoo.org/
63. 63 http://demo.qooxdoo.org/current/demobrowser/
64. 64 http://qooxdoo.org/
65. 65 http://www.netzgesta.de/instant/
66. 66 http://www.liquidx.net/canvasgraphjs/
67. 67 http://www.liquidx.net/canvasgraphjs/
68. 68 http://code.google.com/p/flot/
69. 69 http://code.google.com/p/flot/
70. 70 http://www.lutanho.net/diagram/
71. 71 http://www.lutanho.net/diagram/
72. 72 http://www.dojotoolkit.org/
73. 73 http://ejohn.org/blog/processingjs/
74. 74 http://processing.org/
75. 75 http://blog.osmeusapontamentos.com/processing/dataVisualizationExamplesUsingProcessingJS.htm
76. 76 http://code.google.com/apis/ajaxlibs/
77. 77 http://code.google.com/p/ie7-js/
78. 78 http://www.appelsiini.net/projects/lazyload
79. 79 http://fmarcia.info/jsmin/test.html
80. 80 http://fmarcia.info/jsmin/test.html
81. 81 http://www.crockford.com/javascript/jsmin.html
82. 82 http://developer.yahoo.com/yui/compressor/
83. 83 http://www.scriptalizer.com/
84. 84 http://www.scriptalizer.com/

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook