Experimental build with event listener inspection and function source tooltips

By Christian Krebsaleto. Monday, July 9, 2012 3:35:09 PM

Our latest experimental build introduces the ability to inspect JavaScript event listeners from inside the DOM view.

As these new features rely on functionality that's only recently been added to our browser core, they're currently only available if you're running Opera Next.

Document view, showing the DOM tree - elements that have attached events are shown with a new 'ev' icon.

Elements with an attached event listener are presented with a new icon in the Document view. Hovering the icon opens an overlay with the list of listeners.

Hovering the 'ev' icon on an element shows the event listener overlay.

Each listener has an entry showing the event type as title. The next line shows if it listens in the bubbling or the capturing phase. If the listener was registered with addEventListener or set as 'on'-event-type its type is 'event target listener'. Listeners set as markup attributes are 'attribute listener'. Hovering that type shows the according listener callback in a function source tooltip.

Breakpoints can be set directly in that tooltip. Clicking the title of the function source tooltip switches to the Scripts tab and highlights the corresponding function in the source file.

The last line of a listener entry in the overlay shows where the listener was registered. Again, clicking this line switches to the Scripts tab and highlights the corresponding line in the source file.

To complement the inspection functionality in the Document view, there is also a new Listeners side panel, which gives an overview of all listeners that are currently active, ordered by event type. Each of the event types type can be expanded to show all nodes with an according listener.

The new Listeners side panel, part of the Document panel.

The panel provides a static snapshot of registered event listeners – but as event listeners can be programmatically added, modified or removed frequently, the Listeners panel also features an update button which will refresh the snapshot view.

As a bonus, the new function source tooltips used in the event listener overlay above have also been added to other parts of the JavaScript source view. This can be handy to set breakpoints directly in a callback.

A function source tooltip overlay, shown over a function inspection overlay.

We hope that these new features will be a useful addition for JavaScript developers. As always, we value your feedback and suggestions.

Opera Dragonfly source now on GitHubNew stable release with return value inspection

Comments

Patrick O'Reillypaddy2k Monday, July 9, 2012 4:19:09 PM

I think this build has broken the ability to view the content of a network request. e.g. the payload of an AJAX request. It was working before I opened and closed the developer tools to get the new version.

Martin KadlecBS-Harou Monday, July 9, 2012 4:24:42 PM

Yes! Another of my top wishes smile

The first problem is that even when I reload the site with opened dragonfly the popup still says "< missing javascript source file >" instead of "added in something.html". When I click on it it offers me to reload the site again, but that doesn't help either. (Using the latest and only 12.50 snapshot)

The second thing is, that I'm not sure if pop-up is the best idea to handle the element-related events. The pop-up hides some other parts of the html code and with higher amount of events it might be quite uncomfortable to work with it. One way to solve it might be replacing the pop-up window on hover of the "ev" with "onclick" event that would take mo to the "Listeners" panel, but with the list of events related only to the element.

quarkdrunkensurgeon Monday, July 9, 2012 4:38:56 PM

jQuery support would be awesome

svdb0 Monday, July 9, 2012 4:51:34 PM

Listener inspection sounds like a useful addition.

And since you're asking for suggestions: something like this to view timers (setTimeout/setInterval) could come in handy as well.

IllusionMH109th Monday, July 9, 2012 6:03:59 PM

Dear Opera Desktop team, please, stop read my thoughts bigsmile
Awesome feature.
Would be nice to add breakpoints to listeners code in popup, as described in last feature in this post, even if listener contains only one line.

Originally posted by BS-Harou:

"< missing javascript source file >" instead of "added in something.html")


I can confirm this.

I expected that Listeners would be on Scripts tab with ability to quick jump to element in DOM.

BTW It is normal to send bug reports and feature requests to github if it is about experimental branch?

Christian Krebsaleto Monday, July 9, 2012 6:59:07 PM

Originally posted by 109th:

BTW It is normal to send bug reports and feature requests to github if it is about experimental branch?


That's OK, and thanks for the feedback.

Unregistered user Monday, July 9, 2012 7:11:13 PM

аrteg writes: Yep, event listeners attached via jQuery can't be truly explorable. I think I need some tutorial on how to inspect them. And yes, jQuery support out of the box would be awesome.

Christian Krebsaleto Monday, July 9, 2012 10:16:23 PM

Originally posted by BS-Harou:

The first problem is that even when I reload the site with opened dragonfly the popup still says "< missing javascript source file >" instead of "added in something.html".


Do you see that for others than attribute handlers? For those it's somehow expected, also the string needs to be improved and the click handler removed. Just reloading the document still doesn't create source code, that only happens the first time an attribute type listener gets called.

IllusionMH109th Monday, July 9, 2012 11:27:20 PM

Originally posted by aleto:

Do you see that for others than attribute handlers?


In general, I see this string for attribute handlers.

But there is an exception - before page reload(when Scripts tab is empty) I can see this string too. (this is expected behavior for me)
http://img339.imageshack.us/img339/6266/odflisteners.th.png -

Also there is problem with scripts without actual filename (screen from gmail for example)
http://img840.imageshack.us/img840/738/odflisteners2.th.png -

It will be possible to see all listeners just after page reload(even better on Listeners tab opening) in future?
For example: just simulate click on Update button or add checkbox to Listeners tab or settings. Or it will cause bad performance?
Because even on this page after simple reload even attribute handlers aren't seen.

Martin KadlecBS-Harou Monday, July 9, 2012 11:29:11 PM

Originally posted by aleto:

Do you see that for others than attribute handlers? For those it's somehow expected, also the string needs to be improved and the click handler removed. Just reloading the document still doesn't create source code, that only happens the first time an attribute type listener gets called.



You are right, the problem is only with attribute handlers! I have found more issues while testing it though!

Go to:
http://files.myopera.com/BS-Harou/files/events1.html

[wtf 1] Open dragonfly and go to the "Listeners" tab in "Document" section. Try to click on the "+" button next to "click". Nothing happens. Why?

[wtf 2] When you clicked on the "+", try to click on the "Update" button. The "click" disappears from the list.

[wtf 3] Now go to any other tab and back. The "updated" button is gone.

IllusionMH109th Monday, July 9, 2012 11:48:15 PM

Originally posted by BS-Harou:

I have found more issues while testing it though!


Confirm all of these issues

Christian Krebsaleto Tuesday, July 10, 2012 5:51:24 AM

Originally posted by BS-Harou:

Go to:http://files.myopera.com/BS-Harou/files/events1.html
[wtf 1] Open dragonfly and go to the "Listeners" tab in "Document" section. Try to click on the "+" button next to "click". Nothing happens. Why?
[wtf 2] When you clicked on the "+", try to click on the "Update" button. The "click" disappears from the list.
[wtf 3] Now go to any other tab and back. The "updated" button is gone.


Probably all the same bug, will look into it, thanks for reproting!

Daniel Herzogdanfoooo Tuesday, July 10, 2012 8:20:13 AM

Originally posted by paddy2k:

I think this build has broken the ability to view the content of a network request. e.g. the payload of an AJAX request. It was working before I opened and closed the developer tools to get the new version.



Thanks for reporting, this is indeed broken in this build.

Unregistered user Wednesday, July 11, 2012 8:08:47 AM

Anonymous writes: That's a great new feature ! // is any support for popular libraries planned ? JQuery, Mootols,YUI, others ?

Mathieu 'p01' HENRIp01 Wednesday, July 11, 2012 8:55:00 AM

What do you mean by jQuery/Mootols/YUI support ?

JanGen Friday, July 13, 2012 12:19:26 PM

Nice enhancement.

While debugging, I often lose track of which tab exactly I'm debugging, especially with cloned tabs. The order of the DF dropdown doesn't seem to resemble the order of tabs in the main window (at least not after reordering).

Can't there be a visual feedback which tab is debugged, by showing the DF icon instead of the favicon, or some other visual feedback on the tab.

Furthermore with cloned tabs, sometimes after reloading DF loses track (after inputting some content in input fields & reloading?) of which item in the dropdown points to which tab, Sometimes two dropdown items point to the same tab

Unregistered user Friday, July 13, 2012 11:10:00 PM

Anonymous writes: @Mathieu_'p01'_HENRI i meant support for custom event listeners. And i see they work just fine both for JQuery and MooTools ) this is just great!

Unregistered user Friday, July 13, 2012 11:12:34 PM

Anonymous writes: There is an annoying bug with Ctrl+Shift+I bringing tab-cycler popup (?!) and also it crashes very often, especially with dragonfly enabled. But still thanx for early preview of so many cool features.

Write a comment

New comments have been disabled for this post.

Next builds

New features are added to the experimental branch as soon as they're ready. Once tested, they move to the cutting-edge branch as a release candidate. Unless any problems arise, they are then promoted to the stable branch.

To switch to these builds, enter the relevant URL in opera:config#DeveloperTools, save the configuration change and (re-)open Opera Dragonfly.

Useful resources

Source code

Bug reports / feature requests