Remote Selector

From FirebugWiki

Jump to: navigation, search

Remote Selector represents Firebug extension example showing how to use Firebug API for remote debugging. These API are based on RDP

Contents

[edit] Resources

[edit] Features

First of all, take a look at what the extension actually does. It's called remote selector and it's ability is to execute querySelectorAll on the server side - over the remote debugging protocol.

Here is how to use the extension:

  • Install the extension from source
  • Open and enable Firebug Console panel.
  • Type help on the command line. You should see one new command remoteselect(). The method expect one parameter - a selector. The same as you would pass into querySelectorAll.
  • Execute the command e.g: remoteselect("body")
  • You should see result elements that match the selector in the Console. These are coming from the current page.
  • The communication with the current page is done over the remote debugging protocol.

[edit] Architecture

Let's see some details about how the extension is designed. The next diagram displays all basic objects of the extension.


Remoteselector.png

  • SelectorModule Standard module that is responsible for selector-client initialization. This objects registers itself as a DebuggerClientModule listener to get events about connection (e.g. onConnect, onThreadAttached, ...). When Firebug (a client) connects to a remote thread (a tab) onThreadAttached event is fired and the module creates SelectorClient object.
  • SelectorClient This object represents the client part that is responsible for communication with SelectorActor actor on the server side. This object sends only querySelectorAll packet type to the actor.
  • SelectorActor Represents the actor object on the server side. This one is responsible for handling the querySelectorAll packet and return list of matching elements. Every element sent back is also represented by an actor - ElementActor.
  • ElementActor This actor object represents an element returned back from the server. Elements are also actors so, the client can ask for more details about any particular element using element-actor-id (not implemented in this extension).
  • SelectorCommand Represents a custom command object that handles remoteselect() command executed on the command line. You should to pass a CSS selector as an argument to it. No argument is automatically translated to "*" selector.

 

  • DebuggerClient Comes from Firefox API (resource://gre/modules/devtools/dbg-client.jsm). It represents connection to the server side (e.g. implements request method).


[edit] Protocol

Let's also see couple of examples of packets being exchanged between the client and actor (server).

  • SelectorClient sends:
{
  "to":"conn0.selector8",
  "type":"querySelectorAll",
  "selector":"div"
}


  • SelectorActor replies:
{
  "from":"conn0.selector8",
  "result":
    [
      {
        "type":"object",
        "class":"DIV",
        "actor":"conn0.element24"
      }
    ]
}


Consequently the client could send packets to conn0.element24 actor in order to get more information about the element.

Personal tools