firebug / devtools-extension-examples Goto Github PK

As I've just tried to write an extension based on this example, one of the gotchas that took a while to figure out was that the value for prefix set on line 122 in myPanel.js must match the value of typeName set on line 42 in myActor.js.

If these do not match, registering the actor fails:

Handler function DebuggerClient.requester request callback threw an exception: Error: Can't manage front without an actor ID

I suggest changing to work "prefix" to "typeName" to make it at least a bit clearer that these strings are related.

In my panel's initialize() method, how do I get access to the DOM of my loaded panel.html?

See: https://github.com/firephp/firephp-for-firebug.next/blob/8ccf127d81dd3d76dfea786df410bc4e7d4e01c6/client/lib/panel.js#L29

Running jpm testin the helloworld example causes an error message.
I suppose

var main = require("./main");

is supposed to be

var main = require("../lib/main");

Might also be an issue for other examples.

This pretty covers most of devtools use cases.

• If you're accessing audio nodes, or animation players on a page you'll likely need access the window property or use a bridge
• If you want to create a Blob URL in the web page from devtools that come from the content, you'll likely need to do that as well. (Create a blob from the devtools --> Pass it to the content --> create an URL there). Note that you can't create a blob URL directly from the devtools, since it does not work with e10s

This tripped me up for a bit. I thought ToolboxOverlay was a class in the DevTools API. Calling it MyToolboxOverlay would make the example more clear.

Hey,

I am getting an error on executing the DomInspector project, because the current path for the ActorRegistryFront dependency doesn't exists anymore:

const { ActorRegistryFront } = devtools["require"]("devtools/server/actors/actor-registry");

I replaced it with the following path:

const { ActorRegistryFront } = devtools["require"]("devtools/shared/fronts/actor-registry");

Ref.: [(https://bugzilla.mozilla.org/show_bug.cgi?id=1277673)]

Greetz

See: https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Custom_output

Topic: Customize previews for objects

I have been trying to get the String-only output, Rich output, and Add object previewers to the server examples working without success.

Any chance you can add examples for these?

I am trying to integrate FirePHP deeper than just rendering my own objects into HTML.

$feature firephp/firephp-for-firebug.next#1

Each example should have a test using jpm.

We can then run these tests against sdk and other API changes automatically as commits for specific repos are pushed to github.

I am using https://github.com/firebug/devtools-extension-examples/tree/master/MessageManager

I am trying to get messages from chrome scope in scripts loaded into the myPanel.html page.

So I am receiving messages in the frame-script.js but how do I now pass these onto the HTML page?

Using following in frame-script.js and myPanel.html respectively does not work:

content.postMessage(data, "*");

window.addEventListener("message", messageListener, false);

Do I need to send messages by using a DOM element as a proxy?

Some of these issues are just me learning how this code works, so feel free to close them without "fixing" ...
toolbox-overlay.js calls listTabs:

  target.client.listTabs(response => {

Then later calls it again inside the arrow function:

    target.client.listTabs(({ tabs, selected }) => {

If I understand correctly, the 2nd call could be:

    target.client.listTabs((response.tabs, response.selected) => {

❓

That would eliminate a duplicate call to listTabs right?