March, 2006 - The Ajax Frameworks section of this site began in mid-2005 and now contains around 150 frameworks, but there's also a whole category of tools which don't fit nicely there. Let's collect them here and break them out into separate pages when there's enough of them.
| Contents [hide]
- 1 Multipurpose Tools
- 2 IDEs and IDE Plugins
- 2.1 Ajax IDE and ADL(Ajax Dev Library) In JoyiStar
- 2.2 Ajax Toolkit Framework for Eclipse
- 2.3 IntelliJ Idea
- 2.4 Morfik
- 2.5 JSEclipse
- 3 DOM Inspectors
- 3.1 Firefox DOM Inspector
- 3.2 Firefox Web Developer Extension
- 3.3 View Rendered Source
- 3.4 IE Developer Toolbar
- 3.5 IEDocMon
- 3.6 Mouseover DOM Inspector
- 4 Debuggers
- 4.1 Venkman for Firefox
- 4.2 Firebug debug extension for Firefox
- 4.3 Microsoft Script Debugger
- 4.4 Javascript HTML Debugger
- 5 Traffic Sniffers
- 5.1 XMLHttpRequest Tracing and XMLHttpRequest Debugging
- 5.2 Fiddler
- 6 Javascript Unit-Testing
- 6.1 Scriptaculous Unit-Testing
- 6.2 JsUnit (Hieatt)
- 6.3 JsUnit (Schaible)
|
[edit]
Multipurpose Tools [edit]
IDEs and IDE Plugins
Note: The following products have both an IDE component and a framework/library component. For that reason, they appear on the Javascript Multipurpose Frameworks page.
- Atlas
- Backbase
- Tibco General Interface
- JoyiStar WebShop
[edit]
Ajax IDE and ADL(Ajax Dev Library) In JoyiStar
[1] JoyiStar WebShop is the first visual Ajax IDE. It provides an efficient OOP developing method to construct stable and convenient Rich Web applications based AJAX component.
- Main Features: 1, efficient developing tool The JoyiStar WebShop is a visualized modeling IDE (Integrated Development Environment). It follows the OOP methodology and is constructed by many components which are useful to accelerate application development process. In other words, it helps to produce mature and complicate Rich Web applications at certain high level. 2, AJAX development tools The JoyiStar WebShop is an AJAX development tools to develop business-critical web applications and it offers optimizing power of AJAX technology. 3, Encapsulated Web Components - avoid your pain The JoyiStar WebShop provides many web components to attain powerful functions such as dynamically generate master-details, user interfaces, web report etc. 4,Support source insight... 5, Simple, Secure, Standards based Pull-drag developing - program in the mode of your choice. Cross-Platform - support all major browsers at present. Integration - integrates with existing server-side codes and services.
- Screencast
- Free for trial use
- Commercial from JoyiStar.
[edit]
Ajax Toolkit Framework for Eclipse
Ajax Toolkit Framework is a plugin for general-purpose (but Java-focused), open-source, Eclipse IDE.
[edit]
IntelliJ Idea
IntelliJ Idea] is a Java IDE, and has been building extensive Javascript/Ajax support since version 5.0 (mid-2005).
- Code completion, Error & syntax highlighting, Refactoring Code, Formatting, Find usag, Highlight usages, Surround with..., Goto symbol, Goto declaration, Code folding, Support for labels, Structure view
- Screencast
- Commercial from JetBrains.
[edit]
Morfik
Morfik WebOS AppsBuilder brings extreme simplicity to the design of sophisticated AJAX applications without compromising their functionality. You don't need to write any HTML, XHTML, XML, JavaScript or CSS.
[edit]
JSEclipse
JSEclipse is an Eclipse plugin dedicated to JavaScript editing. The code completion engine parses class definitions idioms used by prototype.js, script.aculo.us, Yahoo UI, dojo and qooxdoo.
- Free for non commercial use from InterAKT Online
[edit]
DOM Inspectors
As described in DOM Inspection pattern, these tools let you inspect the web page structure (DOM) in real-time.
[edit]
Firefox DOM Inspector
Firefox ships with a DOM Inspector tool, accessible from the tools menu.
- Note: In Windows, you need to ensure "Web Developer Tools" is selected during installation.
- The inspector is a popup window, showing the DOM hierarchy on one side, facing a summary of the selected node. The summary shows node attributes such as registered event handles, as well as CSS style information.
- Open-source from Mozilla.
[edit]
Firefox Web Developer Extension
Web Developer is an invaluable Firefox toolbar for web development. Among its vast feature set are several commands especially relevant to DOM Inspection:
- Display commands augment the page with DOM information, which makes a great alternative to exploring the DOM in a completely separate view. For example, Display Topographic Information alters the page to reveal the layout of DOM elements and Display ID and Class Details augments each element with its id and class attributes.
- Outline commands draw outlines around elements of a particular type. For example, Outline Block Level Elements or Outline Table Cells. In fact, you can define custom outlines to outline any element you want.
- Form commands help expose form structure. Display Form Details augments the form with information about each control, while View Form Information opens up a summary page.
- Open-source from Chris Pederick.
[edit]
View Rendered Source
View Rendered Source is a Firefox extension that shows the entire DOM as an HTML document.
- The rendered source is shown in a pretty-formatted style, using colours and spacing to help convey the DOM structure.
- Free from Jennifer Madden (enhanced version available for a small fee)
[edit]
IE Developer Toolbar
Microsoft's IE Developer Toolbar, for IE6+, has a number of DOM Inspection capabilities and is similar to the Firefox Web Developer Extension.
[edit]
IEDocMon
IEDocMon is a tool that extends IE to include an interactive view of the DOM.
- Open-source by Tim Tabor.
[edit]
Mouseover DOM Inspector
Mouseover DOM Inspector is a convenient bookmarklet that lets you explore the DOM by mousing over page elements.
- All major browsers except Safari.
- Open-source by Steven Chipman.
[edit]
Debuggers [edit]
Venkman for Firefox
Venkman is a Firefox extension with fairly sophisticated debugging support.
- When you open the debugger, it shows a list of Javascript files, which you can then open up to set breakpoints.
- Open-source from Mozilla. (Note: Not included in standard Firefox download.)
[edit]
Firebug debug extension for Firefox
Firebug is a Firefox extension by Joe Hewitt providing a Javascript logging and debugging console with useful features such as AJAX requests logging, CSS errors, Javascript interpreter, search tool...
- By default Firebug is hidden at the bottom of the page and can be open by pressing F12 or by clicking on the icon located at the bottom left of the navigator window
- A demonstration of FireBug by Joe Hewitt at Yahoo!
- Open-source (Mozilla Public License)
[edit]
Microsoft Script Debugger
Microsoft Script Debugger offers basic debugging functions, e.g. breakpoints, a basic call stack, step in/out/over, error triggers.
- While not as feature-rich as Venkman, it's still quite useful for investigating IE-specific bugs.
- Note: The IE Blog lists several options for IE debugging.
- Free from Microsoft.
[edit]
Javascript HTML Debugger
- Javascript HTML Debugger is a standalone Windows application with similar functionality to Venkman, but a greater emphasis on ease-of-learning.
- Commercial from SplineTech.
[edit]
Traffic Sniffers
As described in Traffic Sniffing, these tools let you monitor web remoting (XMLHttpRequest etc.) traffic. Note there are many general-purpose web proxies that will perform logging, which may be good enough for your needs.
[edit]
XMLHttpRequest Tracing and XMLHttpRequest Debugging
These Greasemonkey extensions allow monitoring XMLHttpRequest traffic.
- XMLHttpRequest Tracing unobtrusively logs traffic to the Javascript console.
- XMLHttpRequest Debugging is a much more powerful, interactive, Popup tool that not only shows the messages, but lets you set filters and configure the display.
- Both are Greasemonkey scripts, so you'll need to install the Greasemonkey extension first.
- Open-source from Julien Couvrer.
[edit]
Fiddler
Fiddler is a Windows proxy specifically designed for analysing and "fiddling" with browser-server traffic.
- Free from Eric Lawrence and Microsoft.
[edit]
Javascript Unit-Testing
As described in Browser-Side Test.
[edit]
Scriptaculous Unit-Testing
The Scriptaculous Unit-Testing is based on the xUnit family and the earlier JSUnit frameworks.
- Each test is an HTML page containing the test in a script, and the HTML page is passed as an argument to a test runner page.
- Open-source from the team of Scriptaculous volunteers.
[edit]
JsUnit (Hieatt)
JsUnit is a testing framework that supports standard xUnit-like functionality.
- Demo page.
- Each test is an HTML page containing the test in a script, and the HTML page is passed as an argument to a test runner page.
- Open-source from Edward Hieatt.
[edit]
JsUnit (Schaible)
JsUnit works similarly to Hieatt's JSUnit (both were apparently developed in parallel).
- Open-source from Jorg Schaible.
Retrieved from "http://www.ajaxpatterns.org/Tools"src:http://ajaxpatterns.org/wiki/index.php?title=Tools
