How to quickly view what js code is assigned to a given element

[luisma...@gmail.com]

Hello, 

Is there a way, or an add-on to Chrome Developer Tools, to quickly view what callback function has been assigned to a given html element? It would be very helpful, instead of having to inspect the Sources tab. I know how to access from an element variable to its corresponding line in the Elements tab when debugging (the "reveal in elements panel" option in the context menu), but I'm not sure if the opposite is possible, that is, what if I want to know if a given element in the Elements tab has been attached any callback without the need for inspecting the Sources tab line by line? I'm speaking about unobtrusive javascript, of course (no attributes of js events in the html elements).

[Yury Semikhatsky]

Did you see "Event Listeners" section in the Elements panel which lists all event listeners for selected DOM node? Is it what you are looking for?

[luisma...@gmail.com]

I was thinking on something like pop-up links to the scripts on the html code of the Elements panel. 

Anyway, I didn't use the Event Listeners panel and it looks very helpful, but apparently there is a drawback. For instance, I have this code in my own scripts.js file (line 11):

11    $('#contact-me').click(function() {

If I click on the corresponding element in the Elements tab, it is displayed within the "click" dropdown list, but the linked javascript file is direclty the jQuery file: jquery-1.8.3.min.js:2

This doesn't help much in this case actually. I would like to get quick access to the file in which the callback has been assigned, or where the callback function is (in my case both are in the same location, which is like I said, line 11 and subsequents in scripts.js)

[Brian Grinstead]

I've thought about the same thing regarding events bound with jQuery or other frameworks, and wrote a post detailing a solution that could possibly work.  Basically, devtools could show the stack trace of when the event was bound: http://www.briangrinstead.com/blog/devtools-feature-request-show-stack-trace-in-event-listeners.  Not really sure how possible this is to implement, but it would be useful!

Brian

[Yury Semikhatsky]

On Wed, Jan 16, 2013 at 6:21 AM, Brian Grinstead <briangr...@gmail.com> wrote:

I've thought about the same thing regarding events bound with jQuery or other frameworks, and wrote a post detailing a solution that could possibly work.  Basically, devtools could show the stack trace of when the event was bound: http://www.briangrinstead.com/blog/devtools-feature-request-show-stack-trace-in-event-listeners.  Not really sure how possible this is to implement, but it would be useful!

DevTools don't provide any specific support for frameworks like jQuery. The solution described in the post would require capturing stack traces every time event listener is added. This may cause undesireable performance penalty. I think a slightly different solution can be implemented by adding special mode to jQuery in which it would collect stack traces for the places where event handlers are added and implementing a DevTools extension that would display those stack traces in the DevTools UI.

[Brian Grinstead]

This feature would benefit more than jQuery users.  Any DOM library is going to be using a wrapper function for event binding, and even if you aren't using a third party library it is likely that there is at least a separate function to bind DOM events (to handle cross browser compatibility).  It would also be nice to see what triggered the event binding in the first place (even if you were using addEventListener directly).

Fair point on the performance.  I figured that if it was already keeping track of the original file name / line # of the actual addEventListener call it wouldn't be too much more work to keep track of the calls leading up to it, but I just don't really know.  Just trying to think of ways to make the 'event listeners' panel more useful.

Brian

[luisma...@gmail.com]

I support the idea to provide some way like Brian said to debug code made with jQuery, or any other framework like Mootools, Prototype, etc. In the end, how many people use raw javascript to code web applications? It would be insane unless it's something simple. The people use javascript frameworks. If this way the EventListener panel is useless (I don't need to know what jQuery is internally doing) it only makes sense either for simple projects or for crazy people (no offense, I mean in the best sense) who don't rely on a framework to code complex projects.

So I think what Brian said would be great. If it's very resource consuming, then a button to switch it off and free memory once you don't need it would be perfect.

[Yury Semikhatsky]

On Wed, Jan 16, 2013 at 6:15 PM, Brian Grinstead <briangr...@gmail.com> wrote:

This feature would benefit more than jQuery users.  Any DOM library is going to be using a wrapper function for event binding, and even if you aren't using a third party library it is likely that there is at least a separate function to bind DOM events (to handle cross browser compatibility).  It would also be nice to see what triggered the event binding in the first place (even if you were using addEventListener directly).

Fair point on the performance.  I figured that if it was already keeping track of the original file name / line # of the actual addEventListener call it wouldn't be too much more work to keep track of the calls leading up to it, but I just don't really know.

It doesn't keep track of the addEventListener call at the moment. We show location of the event handler function in the source code, not the place where addEventListener was called.

[PhistucK]

An extension that adds a "jQuery Events" drawer is attached.

(It is much like the regular "Event Listeners" drawer, but includes actual handlers added by jQuery, without the unhelpful abstraction.)

Right clicking on a function shows a "Show function definition" option that goes to the source of the handler function.

☆PhistucK

[Yury Semikhatsky]

There is a syntax error in the extension:

[24900:24900:0118/105119:ERROR:CONSOLE(34)] "Uncaught SyntaxError: Unexpected token }", source: chrome-extension://lappnpbkmofdmihaogoadojiajjkgfen/jquery-events.js (34)

[Pavel Feldman]

We are working on putting expandable function object into the event listeners sidebar as well. You will be able to expand it and see all of its closure variables, including the actual handler that framework is wrapping.

Regards

Pavel

[PhistucK]

That sounds amazing. How are you going to do that generically (not only for jQuery)? create heuristics that determine whether a handler is actually a framework wrapper?

☆PhistucK

[Pavel Feldman]

It will operate on function object and list all of its closures with their variables. This approach is framework-agnostic. It already works for functions dumped into the console. Just need to add them into the listeners sidebar.

[dylanb...@gmail.com]

Is there a way to get access to this information through the debugger API? I searched the documentation but could not find anything.

--Dylan

On Friday, January 18, 2013 11:47:47 AM UTC-5, Peter Rybin wrote:

I added a bug on WebKit project:

https://bugs.webkit.org/show_bug.cgi?id=107289

[dylanb...@gmail.com]

crickets

[Paul Irish]

Hi Luis,

This was implemented a few weeks ago: http://trac.webkit.org/changeset/142627

Dylan, you'll see the addition to the debugger protocol in inspector.json in the changeset.

Cheers.

crickets

--

You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Dylan Barrell]

Paul Irish rocks - thanks!

--Dylan

[sexydev...@gmail.com]

@Paul I've installed the latest version of Chromium but I don't see a handler object, associated menu, or "Show function definition" menu choice.

Do I have to manually patch? 

tyvm :^)

[Paul Irish]

It's available in Chromium 27 but not in 26. 

Another screenshot from my canary build: 

[keithj...@gmail.com]

The "Show Function Definition" option does not display the function definition.

It still takes me into the event handling code within the jQuery library.

Is there a specific setting required? Chrome Canary v27.

tyvm

Keith ~kjm~

[ma...@scottmwilliams.co.uk]

I'm also wondering the same thing , which any event handlers I just end up in the jQuery source.

[co...@dorning.me]

Any update on this? Still doesn't seem to exist.

[avinash....@gmail.com]

Hey. There doesn't seem to be a tool/option added specifically for this purpose, but there is a workaround for pages with jQuery < 1.10. Here's what I do. I first right-click the object in the view and select "Inspect element". This should highlight the element in the Elements tab in Chrome dev tools. I then head over to Console and type in "$._data($0)" (again...only works with jQuery loaded on the page). "$0" here refers to the current element. The function "$._data" returns an object that contains two properties, events & handler. Expand the "events" option to see all the events that have event handlers assigned. Expand over any of then and hover over the property "handler". It should show you something that looks like the attached screenshot. I think I had seen this in one of Paul Irish's awesome videos!! :-) Hope this helps.

Eg. http://jsfiddle.net/MmDV7/1/

Cheers.