User:MarkFinkle/RemoteDebugging: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 6: Line 6:
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.  
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.  


[[File:Fennec-firefly-shell.png]]
[[File:Fennec-firefly-shell.png|240px]]


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.
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.
Line 14: Line 14:
The "probe" has a minimal UI, only adding a Remote Debugging connection section in the Fennec Preferences panel.
The "probe" has a minimal UI, only adding a Remote Debugging connection section in the Fennec Preferences panel.


[[File:Fennec-firefly-probe.png]]
[[File:Fennec-firefly-probe.png|240px]]


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.
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.
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
*'''getWindow(type)''' - returns the chrome window of a given type
*'''getWindows()''' - returns an array of all open windows
*'''dumpOBJ(object)''' - lists all properties and functions associated with a given JS object
*'''dumpDOM(element)''' - dumps the markup for a given DOM element


== Using a Relay Server ==
== Using a Relay Server ==


TODO
TODO

Revision as of 02:21, 18 May 2011

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.

Fennec-firefly-shell.png

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.

Fennec-firefly-probe.png

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
  • getWindow(type) - returns the chrome window of a given type
  • getWindows() - returns an array of all open windows
  • dumpOBJ(object) - lists all properties and functions associated with a given JS object
  • dumpDOM(element) - dumps the markup for a given DOM element

Using a Relay Server

TODO