User:MarkFinkle/RemoteDebugging

Firefly Remote JS Shell

Firefly is a two-part add-on system that allows developers to interact with the chrome JS of Fennec while running on a mobile device. The "probe" add-on installs into Fennec on the mobile device. The "shell" add-on installs into Firefox or Fennec running on a desktop host.

Add-ons are here: http://people.mozilla.com/~mfinkle/fennec/addons/

Both add-ons are restartless, making them simple to add and remove. The "shell" runs as an about:firefly page and has basic shell-like features.

If your host machine and mobile device are on the same network, or can "see" each other somehow, the simplest way to start is to add a listening port and press "Start Server" button. The host shell will start listening for device connections on the given port. Once the host is listening go to the device and try to connect using the host's IP address and the listening port.

Using a proxy server is a way to connect the host and device via an intermediate "relay" server. This is useful when the device and the host are on different networks, like when the device is on a 3g cellular connection. The relay server needs to be publicly visible to both the host and the device. More on this mode below.

The "probe" has a minimal UI, only adding a Remote Debugging connection section in the Fennec Preferences panel.

Simply enter the IP address and port of the host machine, and "Connect". The host shell should display an alert letting you know Firefly has connected.

In the shell console, try entering "window.Browser.selectedBrowser.contentTitle" (press ENTER) and see what is returned.

Shell Commands

The shell commands run in a sandbox on the device. The sandbox has a few built-in properties and functions:

• window - The active chrome window. With this object, you have full access to the window's JS and DOM.
• firefly - Injected API with some special utility methods:
  • getWindow(type) - Returns the chrome window of a given type.
  • getWindows() - Returns an array of all open windows.
  • inspectJS(object) - Lists all properties and functions associated with a given JS object.
  • inspectDOM(selector or element) - Dumps the markup for a given DOM element. you can pass a CSS selector string or a rel DOM element to the method.

Using a Relay Server

TODO