Wednesday, 12 June 2013

Opening up TeamMentor’s Javascript Trace Viewer which hooks TM method calls

If you are trying to debug (or understand) the TeamMentor’s Javascript layer, there are a number of debugging tools and options (in the /Javascript/TM/Settings.js file) that might help you:

image

In this post I’m going to mailing cover the TraceView which is a pretty powerful way to view the UI events and methods executed (during normal UI interaction).

The solution (skipped with TeamMentor) is based on the http://interlogy.com/~cigdem/trace/:


... and on the http://blog.johnmckerrell.com/javascript-call-tracer/


To access it in TeamMentor, the config settings to change are the window.TM.Debug.show_DebugDiv which is usually set to false:


image

To kickstart things,  we are going to change the show_DebugDiv value to true

image

… and rebuild the application (or restart the server), so that the cache mappings are cleared

Next time TeamMentor opens up, you should see a little Table at the top:

image

… which can be moved around:

image

… and gives you three links:
  • Open Trace View
  • Open Trace View (and hooks)
  • Setup Trace Hooks
Let’s look at the first one, and see what happens when the Open Trace View link is clicked

image

... a larger version of the TraceViewer appears :)

There are a number of ways to interact with this Trace Viewer:

1) Syntax: trace(‘…message….’)

image

2) Syntax: traceErr(“…message…”)

image

3) Syntax: traceArr([ .. javascript array.. ] );

image

4) Syntax: traceAssoc(… javascript object …)

image

5) Syntax: tracerInfo()

image

6) You can also access all these objects (without code complete) on the Run JS tab

image

...by typing the javascript to invoke on the TextArea and clicking on Apply

image

7) Another powerful feature is the 'Watch’  which will monitor the value contents of a particular HTML Element.

For example this is how we can monitor the Search TextBox (note Watching label in red)

image

...and now every time we enter a new value on the textbox we will get an trace message:

image

Note if you want just the trace viewer to open automatically everytime TeamMentor’s main UI loads up, you can set the window.TM.Debug.show_TraceView value to true:

image

Tracing events execution

Ok, so now that we have this trace window open up, what can we do with it?

As mentioned above, the jscalltracer.js is also part of TeamMentor, and after a couple
customizations, it is set-up to add hooks on the main TM Methods invocations (including TM Events)

To see this in action , in the ‘debug div’ click on the Setup Trace Hooks link

image

...after about 20sec (depending on your box)

... you should see a number of ‘hooking ...' messages in the Trace Output:

image

If you now do any UI action (like for example clicking on a View), you will see an number of ‘event’ messages show up (note how they are shown in a Tree-like-format, which represent the call depth)

image

More examples of call traces:

1) events that fire when I clicked on the ‘remove filter’ button

image

2) event that fire when I clicked on an Article in the main Table:

image

3) events that fire when I clicked on one of the metadata filters (in this case the Apache technology):

image

Finally, if you are debugging something that happens when TeamMentor loads up for the first time, you want to change the callTrace_LoadEnvironment and callTrace_LoadEnvironment_Before_Gui values

image

...to true

image

... so that you get all events

image

...including the first main javascript call that triggers the rebuild of the entire GUI (if you set callTrace_LoadEnvironment_Before_Gui  to false, the first call captured occurs after the main GUI is loaded)

image
Post a Comment