3

Recently I am finding difficulty understanding whats happening in a CoffeeScript/Backbone app. Its hard to trace whats happening quickly without a very slow step through. The problem I think is: I know an event is triggered (Backbone view event). But I dont know which functions are called because of it. There maybe more than 1. I may not even know with view partial is the event defined (so I cant put a breakpoint?)

Is there a debugger which plots the execution of the program as a graph? So that I can zoom into what I need, or maybe something I can use to "visualize" the execution of my code. Maybe not, if what should I be looking out for. I am not sure where I need to put a breakpoint since I dont know where some events are triggered. Then sometimes I find it hard to understand why the code step through might be jumping here and there, maybe its multiple events and their handlers executing?

Jiew Meng
  • 84,767
  • 185
  • 495
  • 805
  • 2
    I'm thinking you could simply bind all events to a logging callback. Quick googling: http://stackoverflow.com/questions/5848598/jquery-how-can-i-bind-all-events-on-a-dom-element – demux May 10 '13 at 10:43
  • @ArnarYngvason, maybe you misunderstood my question? Or maybe I dont get how this will solve the problem. One of the problems is I dont know which classes/methods are listening to an event. Instead of listening to just 1 event, I listen to many? I think that handler is going to be very messy? Then multiple classes/functions can still listen to all events, making it alot worse, and slower. – Jiew Meng May 11 '13 at 01:29
  • I only suggested it for debugging purposes, but I can see that it would probably not help you if you need to know which methods are triggering specific events as opposed to needing to know which events are triggered at each time. – demux May 12 '13 at 01:34
  • I think [TraceGL](https://trace.gl/) might be what I am looking for – Jiew Meng May 12 '13 at 02:44

1 Answers1

0

Everything in Backbone (Views, Models, Collections, Routers) extends Backbone.Events. That means they have an _events property that contains each bound event (e.g. change) with an array of their subscribers.

In order to access this open your javascript console in chrome, firefox or safari (or anything but IE) and enter the name of a globally accessible instantiated object with ._events at the end. E.g.

products._events

After pressing enter you should be able to expand this and see what is published and subscribed.

Marc Greenstock
  • 11,278
  • 4
  • 30
  • 54