Net Panel Remoting

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Installation)
(Remote HTTP Protocol (RHP) Requirements)
 
(15 intermediate revisions not shown)
Line 4: Line 4:
* [http://getfirebug.com/wiki/index.php/Net_Panel_Architecture_Review Net Panel Architecture Review]
* [http://getfirebug.com/wiki/index.php/Net_Panel_Architecture_Review Net Panel Architecture Review]
* [https://wiki.mozilla.org/Remote_Debugging_Protocol Remote Debugging Protocol] (part of JSD2 effort)
* [https://wiki.mozilla.org/Remote_Debugging_Protocol Remote Debugging Protocol] (part of JSD2 effort)
-
* [http://hg.mozilla.org/users/dcamp_campd.org/remote-debug/ Firefox Source] (includes support for remote debugging protocol)
+
* [http://getfirebug.com/wiki/index.php/HTTP_Monitor HTTP Monitor]
-
== Prototype ==
+
== HTTP Monitor ==
-
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.
+
Check out [[HTTP Monitor]] to connect a remote Firefox/Fennec instances. The user can select an existing tab opened on the remote browser and monitor its HTTP traffic.
-
=== Installation ===
+
=== FBTrace ===
 +
In order to see/filter logs on the server and client you should use following options in the [[FBTrace]] console.
-
* Build Firefox from [http://hg.mozilla.org/users/dcamp_campd.org/remote-debug/ this repository]. It contains basic support for the client/server communication. It's made over TCP/IP and uses [https://wiki.mozilla.org/Remote_Debugging_Protocol]. The result Firefox build must be used for both client and server instances.
+
* Server: ''ERRORS'', ''ACTIVITYOBSEVER'', ''NETACTOR'', ''NET_EVENTS''
 +
* Client: ''ERRORS'', ''ACTIVITYOBSEVER'', ''REMOTEBUG'', ''REMOTENETMONITOR''
-
* Create a new Firefox profile that represents the server side. You need to install '''RemoteActor''' extension into the profile. This extension implements Firebug back-end for the Net panel (HTTP Observer). Source: http://code.google.com/p/fbug/source/browse/#svn%2Fextensions%2Fremoteactor
+
=== Remote Protocol ===
 +
The remote HTTP monitor uses and extends the [https://wiki.mozilla.org/Remote_Debugging_Protocol#Listing_Top-Level_Browsing_Contexts Remote Debugging Protocol] designed for Firefox.
-
* You can also install a Firebug Tracing Console - [FBTrace] to see what's happening on the server. This is recommended. Download the latest version from: http://getfirebug.com/releases/fbtrace/1.8/
+
Here is an example of a typical communication between the server and the client (described from the client perspective).
-
* Create another Firefox profile that represents the client side. You need to install following extensions:
+
<source lang="javascript">
-
** Firebug 1.8: download source from: http://code.google.com/p/fbug/source/browse/branches/firebug1.8
+
// Introduction packet, received just after connect to the server
-
** RemoteBug: Firebug extension that represents the client side, download source from: http://code.google.com/p/fbug/source/browse/#svn%2Fextensions%2Fremotebug
+
RECEIVED {"from":"root","applicationType":"browser","traits":[]}
-
See how to install extensions
+
// Request list of opened tabs on the server
-
[http://getfirebug.com/wiki/index.php/Firebug_Internals#Development_Setup from source].
+
SENT: {"to":"root","type":"listTabs"}
-
* You should also install the Firebug Tracing Console on the client side. Use the same XPI as for the server.
+
// The client has a list of tabs
 +
RECEIVED: {"from":"root","selected":0,"tabs":
 +
    [{"actor":"conn2.tab2","title":"Google","url":"http://www.google.com/"}]}
-
* The client side needs to specify the server name/port info. It's stored in preferences, see the default values:
+
// Attach to a tab.
 +
SENT: {"to":"conn2.tab2","type":"attach"}
-
<pre>pref("extensions.firebug.remotebug.serverHost", "localhost");
+
// Confirmation, client is now attached to the tab
-
pref("extensions.firebug.remotebug.serverPort", 2929);</pre>
+
RECEIVED: {"type":"tabAttached","threadActor":"conn2.context3","from":"conn2.tab2"}
-
* Run both the server and client Firefox instances. Here is an example of arguments for your command line:
+
// Request network-monitor actor
 +
SENT: {"to":"conn2.tab2","type":"networkMonitorActor"}
-
<pre>firefox -P server -no-remote -console
+
// Network-monitor actor (ID) retrieved
-
firefox -P client -no-remote -console</pre>
+
RECEIVED: {"actor":"conn2.networkMonitor4","from":"conn2.tab2"}
-
''Even if there is FBTrace console the system console is still useful too.''
+
// Subscribe to the network-monitor
 +
SENT: {"to":"conn2.networkMonitor4","type":"attach"}
-
=== UI ===
+
// Confirmation, the client is now subscribed for network events
-
The prototype is in very early stage so, the existing UI is created just for testing. The final UI will be different.
+
RECEIVED: {"from":"conn2.networkMonitor4"}
-
* Open some tabs on the Server
+
// Selected tab has been navigated to new URL (or refreshed)
-
* 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.
+
RECEIVED {"from":"conn2.tab2","type":"tabNavigated","url":"http://www.google.com/"}
-
* 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.
+
// Selected tab executed HTTP request(s)
-
* Refresh the selected tab on the server.
+
RECEIVED: {"type":"notify","from":"conn2.networkMonitor4","serial":1,"files":[<list-of-requests>]}
 +
</source>
 +
 
 +
* ''<list-of-requests>'': Represents a list of executed requests in [http://www.softwareishard.com/blog/har-12-spec/ HAR] format.
 +
* Some packets can use an additional ''error'' field in case of unexpected errors. The exact structure of the field should be provided.
 +
 
 +
== HTTP Monitor Remote Protocol Requirements ==
 +
This section summarizes requirements for remote protocol.
 +
 
 +
# There should be a way to get the list of opened tabs on the server
 +
# It should be able to subscribe/unsubscribe to/from a tab
 +
# The client should be able to be notified when the tab is navigated to a new URL or refreshed
 +
# Collected HTTP data should be sent in chunks (e.g. every 300 ms, the timeout should be customizable)
 +
# It should be possible to specify what data should be sent to the client by default
 +
# There should be a way how to request data from the server on demand (e.g. response bodies)
 +
# It should be also possible to specify what data should be actually cached on the server (i.e. what is monitored)
 +
# The server should cache all data until:
 +
#*(a) it is sent to the client (do we need support for more subscribed clients at the same time?)
 +
#*(b) the tab is refreshed or navigated away (what about persistence across reloads?)
 +
 
 +
== Open Question ==
 +
 
 +
* In case the ''networkMonitorActor'' is the only network-related actor, it can be renamed to ''networkActor''.

Latest revision as of 09:41, 29 April 2012

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

Contents

[edit] Resources

[edit] HTTP Monitor

Check out HTTP Monitor to connect a remote Firefox/Fennec instances. The user can select an existing tab opened on the remote browser and monitor its HTTP traffic.

[edit] 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

[edit] Remote Protocol

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

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

// Introduction packet, received just after connect to the server
RECEIVED {"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 HTTP request(s)
RECEIVED: {"type":"notify","from":"conn2.networkMonitor4","serial":1,"files":[<list-of-requests>]}
  • <list-of-requests>: Represents a list of executed requests in HAR format.
  • Some packets can use an additional error field in case of unexpected errors. The exact structure of the field should be provided.

[edit] HTTP Monitor Remote Protocol Requirements

This section summarizes requirements for remote protocol.

  1. There should be a way to get the 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 to be 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 until:
    • (a) it is sent to the client (do we need support for more subscribed clients at the same time?)
    • (b) the tab is refreshed or navigated away (what about persistence across reloads?)

[edit] Open Question

  • In case the networkMonitorActor is the only network-related actor, it can be renamed to networkActor.
Personal tools