Giter VIP home page Giter VIP logo

devtools-extension-examples's Introduction

Firebug

Web Development Evolved getfirebug.com

On November 14, with the launch of Firefox Quantum (AKA 57), support for old school extensions will stop in Firefox. That means Firebug will no longer work for many developers. However, the work continues in the great Firefox devtools. You can try Firefox devtools by updating your release browser or downloading Developer Edition. Read more here

Download

License

Firebug is free and open source software distributed under the BSD License.

Source Repository Structure

See more information about Firebug repository structure.

  • extension Firebug extension directory.
  • tests Firebug automated test files and test harness.
  • trace Firebug tracing console.

Build Firebug XPI

In order to build Firebug *.xpi package run following in your command line (you need Apache Ant)

$ cd firebug/extension
$ ant

The *.xpi file should be located within ./release directory.

Run Firebug From Source

The extension directory directly contains Firebug extension files and so, you can run Firebug directly from it. This is the recommended way how to quickly test your code changes and provide a patch.

  1. Locate your Firefox profile folder
  2. Open extensions/ folder, create if it doesn't exist.
  3. Create a new text file and put the full path to your development folder inside. (e.g. C:\firebug\extension\ or ~/firebug/extension/). Windows users should retain the OS' slash direction, and everyone should remember to include a closing slash and remove any trailing spaces.
  4. Save the file with Firebug ID as it's name [email protected]

Hacking on Firebug

See detailed instructions about how to provide a patch to Firebug source.

Further Resources

devtools-extension-examples's People

Contributors

hallvors avatar iacobvonk avatar janodvarko avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

devtools-extension-examples's Issues

Wrong require statement(s?) in test file

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.

Add example to access "window" global in the web page

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

CustomActor: rename "prefix" in panel to "typeName"

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.

A test for each example

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.

MessageManager messages in HTML panel

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?

Dependency path for ActorRegistryFront

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

DomInspector, ToolboxOverlay.attach calls target.client.listTabs twice

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.