Quantcast
Channel: JavaScriptMVC Forum
Viewing all articles
Browse latest Browse all 3491

Re : Templated Event Listener Handler Debugging Tools

$
0
0
I did a lot of research on this tonight.

I set up a sample Web page to examine this issue, which simply contains two links with different types of event handlers. The first uses jQuery .on(); the second, a Canjs can.Control listener. Note that I also set up a fiddle, but it wasn't very useful.

Here's what I found.

1. In Chrome Inspector, logging $._data(element, 'events') to the console:
...a. jQuery event listener: Able to see the the function definition.
...b. Canjs event listener: Unable to see the function definition. An anonymous function and Canjs internals are shown:

2. In FireBug, logging $._data(element, 'events') to the console:
...a. jQuery event listener: Able to see the the function definition.
...b. Canjs event listener: Not able to see the function definition.

3. In FireQuery:
...a. jQuery event listener: not shown, as expected from the above conversation.
...b. Canjs event listener. Yes, FireQuery DOES show the Canjs event listener function definition! That was a pleasant surprise. At least I now have one tool that shows me Canjs event listeners without having to set breakpoints and trace through the code.

4. In Chrome/Visual Event, neither event listener was shown.

5. Finally, to my dismay, in Chrome Canary v27, the new "Event Listeners" tab shows both attached jQuery and Canjs events, but did NOT show the function definition for either jQuery or Canjs. Based on Pauls comments in the following thread, it looked like this capability would be added to in Chrome v27:

6. Is it safe to assume that IE has no good debugging tools to examine event listeners? I suppose that I could also check out Safari and Opera in my copious free time.

In conclusion:
- jQuery Event handlers: log $._data(element, 'events') to the console, and view in either FireFox or Chrome. Thank you for that tip; it helped a lot. I had been relying on FireQuery, and as stated, it doesn't work for jQuery versions >= 1.8. So I was without a good tool.
- Canjs Event Handlers: FireFox w/FireBug w/FireQuery enables one view Canjs event listeners without having to trace through the code.




Viewing all articles
Browse latest Browse all 3491

Trending Articles