1460106 - Set breakpoints in the debugger directly from the inspector

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Karl Dubost💡 :karlcow]

Attachment: Capture d’écran 2018-05-09 à 09.35.37.png

The inspector in the devtools with its event flags is cool. Very cool.

The link to the code (when it's working) is really nice too. 
What I would like is to be able to set a breakpoint directly on this event right away from the inspector view for this specific element.

There should be an icon to click that would set the breakpoint for this element and only this one.

So at the next interaction with this element, it triggers the breakpoint and open the debugger at the right place on the prettified version of the code.

Comment 1

[:Harald Kirschner :digitarald]

We got some plans to bring back a combination of the old events breakpoints and Chrome's event type breakpoints that would be easy to drive from the Inspector. This part would be considered!

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

The Inspector popup window is rendering list of event listeners collected using platform API nsIEventListenerService and nsIEventListenerInfo

• https://searchfox.org/mozilla-central/rev/42ae3bea104c37a9986c6f18d17bd9ddb387129c/dom/events/nsIEventListenerService.idl#63
• https://searchfox.org/mozilla-central/rev/42ae3bea104c37a9986c6f18d17bd9ddb387129c/dom/events/nsIEventListenerService.idl#36

Steve, could we usensIEventListenerInfo.listenerObject to set a breakpoint? (e.g. on the first instruction within the listener function?)
If not, is there another way how to break JS execution when the listener is executed?

This would help us to implement this feature.

Honza

Comment 3

[Steve Fink [:sfink] [:s:]]

I'm not sure who can answer a question like this, but tcampbell comes to mind as the most likely one to know how to get to a script from an object. Whatever an "underlying JS object of the event listener" is, exactly.

Comment 4

[Karl Dubost💡 :karlcow]

https://twitter.com/razvancaliman/status/1414173873889763328
That's probably another way to do it.
Safari on the break on event list gives the possibility to add conditions, which will execute the break only when a certain condition is met. Very similar to what we do in the debugger when we set a breakpoint on a line.

Comment 5

[Ted Campbell [:tcampbell]]

Yes, I believe you should be able to. Get the Debugger.Object for listenerObject and then access script. Then a breakpoint can be set at offset 0 for the entry point. I'm not sure off the top of my head what the equivalent devtool actors are for these concepts, but this should not be that different than normal debugger features.