Net Panel Remoting

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(UI)
Line 52: Line 52:
* Server: ERRORS, ACTIVITYOBSEVER, NETACTOR, NET_EVENTS
* Server: ERRORS, ACTIVITYOBSEVER, NETACTOR, NET_EVENTS
* Client: ERRORS, ACTIVITYOBSEVER, REMOTEBUG, REMOTENETMONITOR
* Client: ERRORS, ACTIVITYOBSEVER, REMOTEBUG, REMOTENETMONITOR
 +
 +
=== Remote Protocol ===
 +
Remote HTTP monitor uses and extends [https://wiki.mozilla.org/Remote_Debugging_Protocol#Listing_Top-Level_Browsing_Contexts Remote Debugging Protocol] designed for Firefox.
 +
 +
Here is an example of typical communication between the server and client (described from the client perspective).
 +
 +
<source lang="javascript">
 +
// 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","serial":1,"from":"conn2.tab2"}
 +
 +
// Subscribe to the network-monitor
 +
SENT: {"to":"conn2.networkMonitor4","type":"subscribe"}
 +
 +
// Confirmation, the client is now subscribed for network events
 +
RECEIVED: {"subscribe":1,"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>]}
 +
</source>
 +
 +
* <list-of-request>: represents a list of executed request in [http://www.softwareishard.com/blog/har-12-spec/ HAR] format.

Revision as of 14:38, 8 September 2011

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.

  • Open some tabs on the Server
  • Open Firebug UI (F12) on the client. Firebug has a new button in the toolbar. It can say Connect Me! if the client is not connected (connects automatically) otherwise Select Remote URL to pick tab opened on the server.
  • Select a tab, button label should display the title of the selected tab.
  • Select the Net panel, enable. You can press the Clear button if the Net panel was enabled and there are some local HTTP traffic displayed.
  • Refresh the selected tab on the server.

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","serial":1,"from":"conn2.tab2"}
 
// Subscribe to the network-monitor
SENT: {"to":"conn2.networkMonitor4","type":"subscribe"}
 
// Confirmation, the client is now subscribed for network events
RECEIVED: {"subscribe":1,"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.
Personal tools