1

I have really complex page with a lot of javascript to fix. It involves a lot of functions and I need to find out one specific function, which triggers on dragging Raphael JS object. I can't figure out which one that is. Is there some possibility to log whatever runs "right now" to console? I know, that the output would be messy, but I would get a chance to see, what happens, whan I grab the object with my mouse.

Kokesh
  • 3,165
  • 7
  • 29
  • 46

3 Answers3

4

If JavaScript is executing at that precise moment, pressing the Pause icon in the Sources tab of the Developer Tools will stop the script and show you the call stack.

If you want to debug what happens when particular event listeners happen (for instance on a drag-and-drop script), you may be able to do this by right clicking the page element, selecting Inspect Element, then in the right column of the Elements tab, scroll to the bottom and view the Event Listeners attached to that element. Clicking on a particular listener will show you the script source of that listener, and you may be able to add a breakpoint at that point. (Beware that compiled scripts can make this difficult to comprehend)

When investigating problems with a page, either my own or a third party page, one trick is to sprinkle breakpoints liberally on scripts I suspect that fire on button press etc. Then I manipulate the page with the Developer Tools open so that the breakpoints will cause debugging to halt when a breakpoint is hit.

Other tricks if it's your own code is to use console.log statements logging activity to the console, or debugger (which are like software breakpoints). And of course the old-school alert dialog box generating statements can still be useful too.

Jim Blackler
  • 22,946
  • 12
  • 85
  • 101
1

I might be wrong but you should manually use console.log() to write to browser console.

SubRed
  • 3,169
  • 1
  • 18
  • 17
  • 1
    this is the correct answer, but it should be noted that the page will fail to run in IE while the console.log() line is in there. should only be used for debugging. – NappingRabbit Nov 26 '12 at 11:22
  • So you're suggesting the OP should add `console.log()` to _every_ function? – nnnnnn Nov 26 '12 at 11:25
  • @nnnnnn yes I am. On every line of code he needs exactly. Are there any better ways? – SubRed Nov 26 '12 at 11:38
  • Well I'd try the element inspector to see what event handlers are attached, and perhaps try some break points instead, I'm not sure. I guess I assumed the OP already knew that `console.log()` could be manually added to every function but wanted to avoid that if there was some other way to figure out which function(s) were called in response to dragging. – nnnnnn Nov 26 '12 at 11:48
0

Have you tried :

  console.log(yourObject)

Where yourObject is the draggable element ?

In the new chrome console, there is in depth object browsing, maybe you can find what you want in your object prototyppe.

Dave Loepr
  • 946
  • 1
  • 7
  • 13