925060 - angular debugger for Firefox

Status: RESOLVED WONTFIX

(DevTools :: General, enhancement)

Description

[Gregg Lind (Fx Strategy and Insights - Shield - Heartbeat )]

From the "it would be nice" department:

Debugging Angular apps is doable from Dev Tools, but not 'easy'.  A Firefox implementation of something like Batarang would mean I can more easily do demos and hacking on Angular apps from Firefox.

Supports the "Firefox is best for developers" story.

Comment 1

[Brandon Benvie [:benvie]]

Generally speaking, we're less likely to want to support specific frameworks and more likely to want to provide APIs so that third parties (perhaps the creators of those frameworks) can more easily create their own add-ons that provide custom tools that integrate well with the builtin devtools. Perhaps the angle on this might be what APIs would be needed to meet this goal specifically for Angular (and also generally).

Comment 2

[Gregg Lind (Fx Strategy and Insights - Shield - Heartbeat )]

Darn your "big picture" thinking!

1. Your argument makes sense.  
2. I have no of what satisfying that API would look like for Angular.
3. Angular is Google.  Chrome is Google.  I don't know that they have incentive to make that process easy for Firefox.  In the wild, this manifests as almost all Angular tutorials assuming / using Chrome.  This Looks Bad.

How easy is it for Jetpack and what not to hook into dev tools, if it at all?

Comment 3

[Gregg Lind (Fx Strategy and Insights - Shield - Heartbeat )]

(previous work:  http://www.youtube.com/watch?v=qYCL4HOtddY&feature=youtu.be)

Comment 4

[Blake Winton (:bwinton) (:☕️)]

Luca, I think at the Summit you told me about doing something similar for Ember, and why it was _way_ harder for Angular…  Could you add some details about the problems you ran into here?

Thanks,
Blake.

Comment 5

[Jeff Griffiths (:canuckistani) (:⚡︎)]

I'm wontfixing this for the reasons Benvie stated in comment #1. I welcome a port of Batarang to the devtools, and would especially welcome any feedback from that porting effort that might inform a better set of devtools extension apis we're currently planning.

Comment 6

[Luca Greco [:rpl] [:luca] [:lgreco]]

(In reply to Blake Winton (:bwinton) from comment #4)
> Luca, I think at the Summit you told me about doing something similar for
> Ember, and why it was _way_ harder for Angular…  Could you add some details
> about the problems you ran into here?
> 
> Thanks,
> Blake.

I was intrigued precisely by the "pattern" described by Benvie in comment #1 and I started looking for existent framework devtool extensions to convert from chrome to firefox, I've evaluated angularjs-batarang and ember-extension.

= EmberJS Extension

I choosen ember-extension because it use a very clean modular approach and it **builds** the browser extension using grunt from three module:

- app: the devtool panel, an emberjs app
- ember_debug: the javascript injected into the current tab (using jetpack modules in my firefox port) to detect and hook on an emberjs app
- vendor: javascript dependencies

the app and ember_debug modules exchange messages using a simple json protocol (over a MessageChannel on chrome, and polyfilled using jetpack modules and custom DOMEvents in my current port to firefox) and can activate the inspector which points to a defined selector.   

= AngularJS Batarang

AngularJS **is**  a chrome extension.

It's absolutely possible to convert it from chrome to firefox, but IMHO it needs to: 

- be rewritten in something more like ember-extension (a "project which builds its browser extension" vs "be a browser specific extension"), 
- isolate chrome specific code into an abstracted module and than to convert its chrome extension api calls into their firefox counterparts.

Besides that, some of batarang features needs new extension points into the existing integrated devtools (the last two feature described in the repo README from https://github.com/angular/angularjs-batarang): 

- API to be able to add a custom panel to the integrated DOM inspector
- API to be able to define custom objects into the integrated WebConsole

Comment 7

[Gregg Lind (Fx Strategy and Insights - Shield - Heartbeat )]

Luca, thank you for the comments! 

Extending the DOM Inspector menu to add entries like "ng scope of this" would be helpful.

Jryans, would it make more sense to newbug for those two api extensions instead?

(Thanks for triaging this so quickly, btw!)

Comment 8

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

(In reply to Gregg Lind (User Research - Test Pilot) from comment #7)
> Jryans, would it make more sense to newbug for those two api extensions
> instead?

Well, I was just correcting the resolution back to WONTFIX as Jeff had originally set it.

But yes, filing new bugs for those API additions sounds like a good plan to me. :)