JavaSScript Object Diagram integration with Firebug

[Sandip Chitale]

I am trying to integrate my JavaScript Object Diagram (JSOD) with Firebug Watches panel. I have done a similar integration with Chrome devtools. For details see: 

http://sandipchitale.blogspot.com/2014/03/javascript-object-diagram-integration.html

I have started my firebug extension and got to the point of showing a context menu on values in Watches panel. See:

In case of Chrome devtools I basically get hold of the RemoteObject. I draw the JSOD based on that. It is my understanding the equivalent of that in Firebug is ObjectReference. It should be very easy to port the Chrome integration code once I get hold of the ObjectReference because it is roughly similar to RemoteObject.

Sooo... my question is, how do I get hold of the ObjectReference in my context menu click callback?

Any tips are appreciated. Once done I will contribute the extension to Firebug community.

Regards,

Sandip

[Jan Honza Odvarko]

On Tuesday, April 8, 2014 8:06:58 AM UTC+2, Sandip Chitale wrote:

I am trying to integrate my JavaScript Object Diagram (JSOD) with Firebug Watches panel. I have done a similar integration with Chrome devtools. For details see: 

Sounds great!

http://sandipchitale.blogspot.com/2014/03/javascript-object-diagram-integration.html

I have started my firebug extension and got to the point of showing a context menu on values in Watches panel. See:

You should build your extension for Firebug 2
https://blog.getfirebug.com/2014/04/04/firebug-2-0-alpha-2/

The final 2.0 release will happen in about 2 months (when Firefox 30 is out)

The way how to extend the Watch panel context menu is the same.

In any case, this Firebug extension example should help
https://github.com/firebug/extension-examples/tree/master/ContextMenu
(if not, let me know and we can create a new example)

In case of Chrome devtools I basically get hold of the RemoteObject. I draw the JSOD based on that. It is my understanding the equivalent of that in Firebug is ObjectReference. It should be very

This is version 1.7 and quite obsolete
 

easy to port the Chrome integration code once I get hold of the ObjectReference because it is roughly similar to RemoteObject.

Sooo... my question is, how do I get hold of the ObjectReference in my context menu click callback?

Take a look at the ContextMenu example, there is the following handler:

onContextMenu: function(items, object, target, context, panel, popup)

The second argument is the clicked object.

Firebug is not fully remotable at this moment, so the object is direct reference.


Honza

 

[Sandip Chitale]

Hi Jan,

Thanks for the response. After a little bit of debugging I figured out that the 'object' argument is a JavaScript object (possibly a wrapper - due to a different JavaScript context) and that for JSOD purposes I can use it as such. So I am on my way to finish the implementation. I have also added JSOD Panel as a top level panel and and am able to switch to it when the context menu is clicked. Now it is simply a matter of populating the diagram.

And yes I will look into building the extension for FB 2.0.

Thanks,

Sandip 

[Jan Honza Odvarko]

On Tuesday, April 8, 2014 3:17:27 PM UTC+2, Sandip Chitale wrote:

Hi Jan,

Thanks for the response. After a little bit of debugging I figured out that the 'object' argument is a JavaScript object (possibly a wrapper - due to a different JavaScript context)

True
 

and that for JSOD purposes I can use it as such. So I am on my way to finish the implementation. I have also added JSOD Panel as a top level panel and and am able to switch to it when the context menu is clicked. Now it is simply a matter of populating the diagram.

Awesome, let us know when we can check out the extension

Btw. here is a tutorial for developing Firebug extensions
(just in case you haven't seen that already)
http://www.softwareishard.com/blog/extending-firebug/

Honza

 

[Sandip Chitale]

Thanks.

Yup...working on finishing it. Will post here when done.

[Sandip Chitale]

Getting there: http://sandipchitale.blogspot.com/2014/04/firejsod-javascript-object-diagram.html

[Sandip Chitale]

I someone wants to try this alpha version here is the git repository:

https://github.com/sandipchitale/FireJSOD/

[Sandip Chitale]

FireJSOD.xpi available.

[Jan Honza Odvarko]

I am seeing a lot of:
Console Service ERROR [JavaScript Error: "TypeError: node.className.search is not a function" {file: "chrome://firebug/content/lib/css.js" line: 356}] [JavaScript Error: "TypeError: node.className.search is not a function" {file: "chrome://firebug/content/lib/css.js" line: 356}]

When selecting the JSOD tab and hovering mouse cursor over it.
(tested with Firebug 1.12.8)

(the JSOD tab is always empty, even if the debugger is suspended)

Honza

[Sandip Chitale]

Hi Honza,

Thanks for trying it out. I am not seeing these errors. What exact versions of Firebug and Firefox are you using. I will try to track these down if I can. Seem to be coming from firebug itself?

Aslo the JSOD Panel is not automatically loaded. When the debugger is suspended, go to the watches panel and right click on the value of a scope variable. In the context menu you will see a JavaScript Object Diagram , click on it. That will load the object into JSOD panel and select it.

Hope this helps.

Sandip

[Sandip Chitale]

BTW I wrote the FireJSOD for Firebug 1.12.8 to be useful to most people. I will port it for Firebug 2.0 Beta. Where is the documentation for the changes from the point of view of extension writers that I can reference?

Thanks,

Sandip

[Sandip Chitale]

I Just tried it on the following combination:

Firefox: 31.0a1 (2014-04-14)

Firebug: 2.0b1

and it seems to work.

[Jan Honza Odvarko]

On Monday, April 14, 2014 7:35:35 PM UTC+2, Sandip Chitale wrote:

Hi Honza,

Thanks for trying it out. I am not seeing these errors. What exact versions of Firebug and Firefox are you using. I will try to track these down if I can. Seem to be coming from firebug itself?

I am testing with Firefox 28 and Firebug 1.12.8

But, the problem came actually from Firebug, fixed at:
https://github.com/firebug/firebug/commit/34f747662f1a512e18e1e7ea4d52a9a90abddfd3

(also fixed in Firebug 2)

> In the context menu you will see a JavaScript Object Diagram , click on it. That will load the
> object into JSOD panel and select it.

Yep, works for me, very nice!

- Scrollbars in the JSOD panel doesn't seem to cover the entire diagram area
- Should the context menu item be available even in the DOM panel?
- Why the debugger needs to be paused?

I am seeing other error in our Firebug Tracing Console (FBTrace)

Console Service ERROR [JavaScript Error: "TypeError: constructorObject is undefined" {file: "chrome://firejsod/content/JSODPanel.js" line: 454}] [JavaScript Error: "TypeError: constructorObject is undefined" {file: "chrome://firejsod/content/JSODPanel.js" line: 454}]

You can install FBTrace (it's Firefox/Firebug extension and it's part of Firebug source repo) to see it.
Read more here:
https://getfirebug.com/wiki/index.php/FBTrace


Honza

 

[Jan Honza Odvarko]

On Monday, April 14, 2014 9:32:07 PM UTC+2, Sandip Chitale wrote:

BTW I wrote the FireJSOD for Firebug 1.12.8 to be useful to most people. I will port it for Firebug 2.0 Beta. Where is the documentation for the changes from the point of view of extension writers that I can reference?

We have a bug filed for this
http://code.google.com/p/fbug/issues/detail?id=5140

And there is a migration wiki page at:

http://getfirebug.com/wiki/index.php/Extension_Migration

Please let us know what kind of info you'd like to see
there and we'll provide it.

Honza

[Sandip Chitale]

I tried it on the following combination:

Firefox: 31.0a1 (2014-04-14)

Firebug: 2.0b1

Everyting worked. So probably no change is required. Thanks for the pointer to the bug and docs link. I will have a look anyway to see if anything is needed to be migrated.

Regards,

Sandip

[Jan Honza Odvarko]

Everyting worked. So probably no change is required.

OK, good.

The refactoring we did (when adopting JSD2, in Firebug 2) touched mainly the Script panel and debugger related APIs. So, extension like yours should work fine.

Honza

 

[Sandip Chitale]

On Tuesday, April 15, 2014 2:21:06 AM UTC-7, Jan Honza Odvarko wrote:

On Monday, April 14, 2014 7:35:35 PM UTC+2, Sandip Chitale wrote:

Hi Honza,

Thanks for trying it out. I am not seeing these errors. What exact versions of Firebug and Firefox are you using. I will try to track these down if I can. Seem to be coming from firebug itself?

I am testing with Firefox 28 and Firebug 1.12.8

But, the problem came actually from Firebug, fixed at:
https://github.com/firebug/firebug/commit/34f747662f1a512e18e1e7ea4d52a9a90abddfd3

(also fixed in Firebug 2)

Excellent!

 

> In the context menu you will see a JavaScript Object Diagram , click on it. That will load the
> object into JSOD panel and select it.
Yep, works for me, very nice!

Thanks! I think this is going to be very useful to JavaScript beginners. In addition, there are advanced applications with some more  changes e..g. we could add more functionality such as diagram showing path to GC roots etc for detecting memory leaks etc

 

- Scrollbars in the JSOD panel doesn't seem to cover the entire diagram area

Yes, I need to handle the layout properly.

- Should the context menu item be available even in the DOM panel?

It may work in case of Firebug because the objects are JavaScript objects.I will look into it. 

 

- Why the debugger needs to be paused?

My original implementation was for Chrome devtools where it was based on RemoteObject instances, which are only available when the debugger is suspended (AFAIK).

 

I am seeing other error in our Firebug Tracing Console (FBTrace)

Yes. I will try this so that I can see exceptions. like below.

Console Service ERROR [JavaScript Error: "TypeError: constructorObject is undefined" {file: "chrome://firejsod/content/JSODPanel.js" line: 454}] [JavaScript Error: "TypeError: constructorObject is undefined" {file: "chrome://firejsod/content/JSODPanel.js" line: 454}]

You can install FBTrace (it's Firefox/Firebug extension and it's part of Firebug source repo) to see it.
Read more here:
https://getfirebug.com/wiki/index.php/FBTrace

Got it. Thanks.

Sandip

[Sandip Chitale]

Fixed  "TypeError: constructorObject is undefined".

[Sandip Chitale]

Everyone please file issues at:

https://github.com/sandipchitale/FireJSOD/issues

On Tuesday, April 15, 2014 9:26:51 AM UTC-7, Sandip Chitale wrote:

Fixed  "TypeError: constructorObject is undefined".

snip