800858 - Break on specific functions

Status: NEW

(DevTools :: Debugger, enhancement, P3)

Description

[Victor Porof [:vporof][:vp]]

I'm looking here at working on the suggestions in https://etherpad.mozilla.org/webgl-tools (lines ~120), but the implementation should be generalized enough to work with any api. WebGL and Canvas 2D methods for starters, but other deliciousness (for example geolocation etc.) would be nice to have as well.

This needs parser support, because just function names are not to be trusted.

The most awkward part is figuring out some nice UI for this. I guess that filterable menus/dropdowns would be ok, but I'd really love to find out a better way of doing this.

Breaking on DOM events is a whole different beast (i'm looking here at media playback handling too, drag-n-drop etc.). See bug 800857.

Comment 1

[Benjamin Smedberg]

I just wanted to break on "showFlashPlayer" without knowing where it was located.

Comment 2

[Victor Porof [:vporof][:vp]]

Without breakpoints column support (bug 676602) (or some clever way of breaking inside native code), this is going to be unuseful in many cases. There are too many cases in which such calls reside in minified sources.

Comment 3

[Victor Porof [:vporof][:vp]]

Waiting on bug 676602 first.

Comment 4

[Hallvord R. M. Steen [:hallvors]]

It would be great to have a "break" console command and be able to call it with ES, host or page function names - 

break encodeURIComponent
break Math.random
break document.write
break XMLHttpRequest.prototype.open

// page has function foobar(){} or var foobar = function(){}

break foobar

// page has o = {foo:function(){}}

break o.foo

Would it work to "wrap" the given method in a proxy method with a debugger statement? I guess we'll introduce confusing stack frames with such a simplistic approach :-/

Comment 5

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

(In reply to Hallvord R. M. Steen from comment #4)
> It would be great to have a "break" console command and be able to call it
> with ES, host or page function names - 
> 
> break encodeURIComponent
> break Math.random
> break document.write
> break XMLHttpRequest.prototype.open
> 
> // page has function foobar(){} or var foobar = function(){}
> 
> break foobar
> 
> // page has o = {foo:function(){}}
> 
> break o.foo
> 
> Would it work to "wrap" the given method in a proxy method with a debugger
> statement? I guess we'll introduce confusing stack frames with such a
> simplistic approach :-/

The developer toolbar has a break command now (Shift + F2 > "help break add") but it currently only supports line numbers. Would be nice to extend it to take function names.