2

Like many people, my brain tends to work well with visual (aka non-textual) information for reading, writing, and creating.

What are some tools that in some way allow me to "see" my currently-running javascript environment visually?

One obvious example would be to just put one box on the screen (or an HTML page) to represent each object that is currently in-memory. The box might contain a label which is the variable currently bound to the object. If I'm using a pubsub library, the box might flash momentarily when the object it represents "gets" a message that it is subscribed to. Clicking on the box might give me a list of all the public methods for that object, and if the code has method signature annotations, I would see the names of its parameters.

Anything somewhat similar to this that is in Javascript and works on a currently-running process is welcome! Also, it must be in the form of a javscript library that I can tack onto existing code, but examples of this kind of tool as found in some IDE or browser plugin as an illustration are welcome.

themirror
  • 9,963
  • 7
  • 46
  • 79
  • you can list out object methods like playing cards with my object exploder bookmarklet, the link at http://danml.com/exploder/ intersting idea about making it animate and live. it can already be very slow to dig out deep properties, live might be too much... – dandavis Oct 04 '13 at 22:47

1 Answers1

0

Although it doesn't use boxes, likely to save screen real-estate, have you given firebug a shot? Though they are not graphical boxes, it uses expandable/collapsable text elements to help visualize an application.

ANd it's not confined to JS. You can use the element picker to pick html elements and see how your JS actually alters the DOM. So let's say on focus, you apply some css to a textbox; you can see that in realtime using Firebug...

It really is a great tool that does ALOT. You can debug your JS line by line, place watches on variables (to see all of their methods and values; to see how their values change in real time, or alter them yourself as the program runs!), see how html and js are read and affected in near real-time and much more... There are also plugins (or at least used to be) to aid in the debugging of other languages, specifically I recall an actionscript plugin that let me see traces from FLASH/SWF objects as they occurred and a PHP plugin as well.

If you haven't tried it. You gotta.

If you are more interested in lower level stuff; as in following HTTP calls in great detail; replicating slow connections; faking your user-agent (can be done from most browsers without this as well though!) then give Fiddler2 a try... I don't use it often BUT when I'm dealing with hard-to-troubleshoot AJAX or http stuff, with alot of back/forth calls, it has been a life saver.

Hope this helps.

Ben A. Hilleli
  • 586
  • 1
  • 6
  • 21