Net Panel Remoting

From FirebugWiki

Revision as of 13:02, 18 January 2012 by Honza (Talk | contribs)
Jump to: navigation, search

This page is summarizing support for remote HTTP monitoring in Firebug.

Contents

Resources


Prototype

Working prototype shows the [Net panel] connected to remote Firefox instance. The user can select an existing tab opened on the remote browser and monitor HTTP traffic.


Installation

  • Build Firefox from this repository. It contains basic support for the client/server communication. It's made over TCP/IP and uses [1]. The result Firefox build must be used for both client and server instances.

See how to install extensions from source.

  • You should also install the Firebug Tracing Console on the client side. Use the same XPI as for the server.
  • The client side needs to specify the server name/port info. It's stored in preferences, see the default values:
pref("extensions.firebug.remotebug.serverHost", "localhost");
pref("extensions.firebug.remotebug.serverPort", 2929);
  • Run both the server and client Firefox instances. Here is an example of arguments for your command line:
firefox -P server -no-remote -console
firefox -P client -no-remote -console

Even if there is FBTrace console the system console is still useful too.


UI

The prototype is in very early stage so, the existing UI is created just for testing. The final UI will be different.

Here is how to test the prototype:

  • SERVER: Open some tabs
  • CLIENT: Open Firebug UI (F12). Firebug has a new button in the toolbar. It says Connect Me! if the client is not connected otherwise Select Remote URL to pick one of the tabs opened on the server. Note that the client is trying to connect automatically at the begging, using the connection info (address, port) from preferences. So, connect if necessary and select a tab from the menu.
  • CLIENT Select the Net panel and enable it. You can press the Clear button if the Net panel was enabled and there are some local HTTP traffic displayed.
  • SERVER: Refresh the tab selected by the client.
  • CLIENT: You should see entries (HTTP requests) appearing in the Net panel.


FBTrace

In order to see/filter logs on the server and client you should use following options in the FBTrace console.

  • Server: ERRORS, ACTIVITYOBSEVER, NETACTOR, NET_EVENTS
  • Client: ERRORS, ACTIVITYOBSEVER, REMOTEBUG, REMOTENETMONITOR


Remote Protocol

Remote HTTP monitor uses and extends Remote Debugging Protocol designed for Firefox.

Here is an example of typical communication between the server and client (described from the client perspective).

// Introduction packet, received just after connect to the server
RECEIEVED {"from":"root","applicationType":"browser","traits":[]}
 
// Request list of opened tabs on the server
SENT: {"to":"root","type":"listTabs"}
 
// The client has a list of tabs
RECEIVED: {"from":"root","selected":0,"tabs":
    [{"actor":"conn2.tab2","title":"Google","url":"http://www.google.com/"}]}
 
// Attach to a tab.
SENT: {"to":"conn2.tab2","type":"attach"}
 
// Confirmation, client is now attached to the tab
RECEIVED: {"type":"tabAttached","threadActor":"conn2.context3","from":"conn2.tab2"}
 
// Request network-monitor actor
SENT: {"to":"conn2.tab2","type":"networkMonitorActor"}
 
// Network-monitor actor (ID) retrieved
RECEIVED: {"actor":"conn2.networkMonitor4","from":"conn2.tab2"}
 
// Subscribe to the network-monitor
SENT: {"to":"conn2.networkMonitor4","type":"attach"}
 
// Confirmation, the client is now subscribed for network events
RECEIVED: {"from":"conn2.networkMonitor4"}
 
// Selected tab has been navigated to new URL (or refreshed)
RECEIVED {"from":"conn2.tab2","type":"tabNavigated","url":"http://www.google.com/"}
 
// Selected tab executed an HTTP request(s)
RECEIVED: {"type":"notify","from":"conn2.networkMonitor4","serial":1,"files":[<list-of-request>]}
  • <list-of-request>: represents a list of executed request in HAR format.
  • Some packets could use an additional 'error' field in case of unexpected errors. The exact structure of such field should be provided.

Remote HTTP Protocol (RHP) Requirements

This section summarizes requirements for the RHP protocol.

  1. There should be a way to get list of opened tabs on the server
  2. It should be able to subscribe/unsubscribe to/from a tab
  3. The client should be able notified when the tab is navigated to a new URL or refreshed
  4. Collected HTTP data should be sent in chunks (e.g. every 300 ms, the timeout should be customizable)
  5. It should be possible to specify what data should be sent to the client by default
  6. There should be a way how to request data from the server on demand (e.g. response bodies)
  7. It should be also possible to specify what data should be actually cached on the server (i.e. what is monitored)
  8. The server should cache all data till: (a) there are sent to the client (do we need support for more subscribed clients at the same time?)
  9. The server should cache all data till: (b) the tab is refreshed or navigated away (what about persistence across reloads?)
Personal tools