JavaScript object browser?

Question

I was recently tasked to document a large JavaScript application I have been maintaining for some time. So I do have a good knowledge of the system.

But due the sheer size of the application, it will probably take a lot of time even with prior knowledge around the code and the source code itself in uncompressed form.

So I'm looking for tools that would help me explore classes and methods and their relationships in JavaScript and if possible, document them along the way, is there one available?

Something like object browser in VS would be nice, but any tools that help me get things done faster will do.

Thanks!

Answer 1

Firebug + uneval(obj) is a simple trick that is often helpful.

Answer 2

Take a look at Aptana, they have an outline that can help you to determine what are the objects and somtetimes their relationship.

Answer 3

Firebug's DOM tab lets you browse the contents of the global window object, and you can inspect a particular object by entering inspect(whatever) in the command line.

You won't be able to use it to detect relationships unless an instance of one object holds an instance of a related object, but it's a start.

You can also use the Options menu on the DOM tab to restrict what's shown to user-defined functions and properties, which should help reduce clutter.

Answer 4

We don't know if this JS application is designed to run in a Web browser...
If yes, as advised, Firebug (a Firefox extension) is excellent at debugging JS and exploring Dom.
On the IE side, you have some tools like IEDocMon, Web Accessibility Toolbar (it does more than its name) or Fiddler (unrelated to your question, but still a good tool to have).

Answer 5

Firebug (Firefox) / Dragonfly (Opera) can help you with viewing objects in realtime

Aptana / JS/UML(Eclipse) can help with relationships of objects

Answer 6

I see a lot of people talking about examining the DOM within Firebug. However, from your question it looks like you want something like jsdoc? just add type and class information through comments and jsdoc generates documentation including class relationships. http://jsdoc.sourceforge.net/

Google has a fork of it with added functionality http://code.google.com/p/jsdoc-toolkit/

UPDATE: It's not a fork, it's a rewrite by the developer that wrote jsdoc originally as a perl script. It aims at being more adaptable so you can use whatever js inheritance/events/properties style you'd like. Another feature is that it lets you modify the templates used to generate the HTML in a much simpler way.