Break on adding event listener |
||||
Issue descriptionFrequently I want to know when an event listener of a specific type was added. Currently you can break when an event listener of a specific type was executed. Maybe in the "Event Listener Breakpoints" panel, you should be able to break on adding an event listener? E.g., Touch: - touchstart - touchmove - touchend - touchcancel - register handler Or something like that? Ideally you'd be able to specify which type of handler you want to monitor, but the UI there might be a bit tricky.
,
Sep 19 2016
CC'ing @chowse our ux engineer; chris, any thoughts on the UI ahmet suggested?
,
Sep 19 2016
Placing "Register handler" and "Remove handler" checkboxes beneath an event (e.g. "click") implies checking the event will also check its children (like checking "Mouse" checks all the events beneath it). This is probably not what people want when they check an event by default.
I'd propose 2 alternatives:
A) Use radio buttons instead of checkboxes, and provide 3 choices, e.g.:
▾ [-] Mouse
▸ [ ] click
▾ [X] mousemove
(•) Event fired
( ) Listener added or removed
( ) Both
Downside: this provides no way to create add/remove breakpoints at the top level,
e.g. all mouse listeners.
B) Make the list a table, with columns representing the types of breakpoints:
| Fired | Added | Removed
▾ Mouse | [-] | [-] | [-]
click | [ ] | [ ] | [ ]
mousemove | [X] | [X] | [X]
This would allow creating Fired/Added/Removed breakpoints at any level.
Downside: A lot more work.
,
Sep 24 2016
Could we simplify this by just having a top-level button that toggles between the "when fired", "when added/removed" and "both" modes for the whole panel? This is already a niche enough use case, I don't personally see myself needing to break on add of one type of event AND break on fire of another type at the same time.
,
Sep 26 2016
I'd be okay with a top-level toggle. Just be sure to add it to the Event Listener heading, similar to the add/refresh controls on Watch.
,
Sep 30 2016
#6 SGTM.
,
Sep 30 2016
Not bad. Some suggestions: * Apparently the proper term for an event listener being called is "invoke", not "fire" (according to https://dom.spec.whatwg.org/#concept-event-listener-invoke). * "Both" will not make much sense when the dropdown is closed. I'd change the options to the following: * When invoked * When modified * When invoked or modified * Hide the dropdown when Event Listener Breakpoints is collapsed (I think this happens automatically in Canary) * Is it possible to remove the space between the string and the triangle? The two look disconnected in that screenshot.
,
Sep 30 2016
LGTM
,
Oct 16 2017
,
Oct 4
Workaround: debug(Element.prototype.addEventListener, "arguments[0] === 'click'")
,
Dec 5
Bulk-closing low priority bugs / feature requests with no action plan. |
||||
►
Sign in to add a comment |
||||
Comment 1 by chenwilliam@chromium.org
, Sep 14 2016Owner: kozyatinskiy@chromium.org
Status: Assigned (was: Untriaged)