1859378 - Allow to set a condition for event breakpoints

Status: NEW

(DevTools :: Debugger, enhancement, P3)

Description

[Sebastian Zartner [:sebo]]

The Event Listener Breakpoints pane should provide an option to set a condition for each enabled event listener.

Like for normal script breakpoints, this would allow further filtering of the breakpoints.

Regarding the UI, there are several (non-exclusive) ways to do that.

• A context menu with Add condition entry for the events like for script breakpoints
• An icon button next to the event
• A context menu with Add condition entry for the logs in the Console

Editing the condition would probably best be placed below the event within the Event Listener Breakpoints pane.
Once added, the condition should be shown at the same place. Showing the condition allows to add some UI to easily edit or remove it.

Sebastian

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Sebo, can you tell us how this could be useful?

Comment 2

[Alexandre Poirot [:ochameau]]

I'm wondering if the tracer would help you debug such scenarios? (still preffed off behind devtools.debugger.features.javascript-tracing)
The tracer is the go-to solution when you don't know exactly what you are looking for.

Especially with bug 1848179, which will log all the DOM events. I now realize that I could probably also log the event target to help even more tracking what's going on.

Otherwise, what would be the typical conditions?

Comment 3

[Sebastian Zartner [:sebo]]

Thank you for the hint regarding the tracer! I'll give it a try later.

Here a few common example use cases:

1. You have a click event listener on the body but in your code you then filter by target to do specific actions. In that case, you could only stop the script execution when the target refers to a specfic element.
2. You have the same type of event listener assigned to multiple elements and want to filter out some targets. Similar to the previous use case, though you'd exclude certain targets in the condition.
3. You want to restrict logging pointer events to when a specific button is pressed, so you check the button property of the event.
4. You only want to debug when a global variable has a certain value, so you check the value of that variable in the condition.
5. You have set up a WebSocket connection but only want to stop the execution when a specific message is received, so you check the message property.
6. You want to debug the scrolling of a specific scroll container (instead of the document), so you filter again by the target.
7. You track mouse movements within your page, though you only want to break when the pointer is within a specific area. Therefore you check the x and y coordinates of the event.
8. You want to track when a specific resource is loaded, so you check the target of the load event.
9. You want to log a keypress event only when a specific key is pressed, so you restrict logging by checking code first.
10. You want to stop the execution on a dragenter event but only if the Control or Command key is pressed. Therefore you verify that metaKey is set.

Sebastian