Net Panel Remoting

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Remote Protocol)
(Remote HTTP Protocol (RHP) Requirements)
 
(7 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 ==
+
-
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 [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.
+
-
 
+
-
* 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
+
-
 
+
-
* 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/
+
-
 
+
-
* Create another Firefox profile that represents the client side. You need to install following extensions:
+
-
** Firebug 1.10: download source from: http://code.google.com/p/fbug/source/browse/branches/firebug1.10
+
-
** RemoteBug: Firebug extension that represents the client side, download source from: http://code.google.com/p/fbug/source/browse/#svn%2Fextensions%2Fremotebug
+
-
 
+
-
See how to install extensions
+
-
[http://getfirebug.com/wiki/index.php/Firebug_Internals#Development_Setup 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:
+
-
 
+
-
<pre>pref("extensions.firebug.remotebug.serverHost", "localhost");
+
-
pref("extensions.firebug.remotebug.serverPort", 2929);</pre>
+
-
 
+
-
* Run both the server and client Firefox instances. Here is an example of arguments for your command line:
+
-
 
+
-
<pre>firefox -P server -no-remote -console
+
-
firefox -P client -no-remote -console</pre>
+
-
 
+
-
''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.
+
 +
== 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.
=== FBTrace ===
=== FBTrace ===
-
In order to see/filter logs on the server and client you should use following options in the FBTrace console.
+
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
+
 +
* Server: ''ERRORS'', ''ACTIVITYOBSEVER'', ''NETACTOR'', ''NET_EVENTS''
 +
* Client: ''ERRORS'', ''ACTIVITYOBSEVER'', ''REMOTEBUG'', ''REMOTENETMONITOR''
=== Remote Protocol ===
=== 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.
+
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.
-
Here is an example of typical communication between the server and client (described from the client perspective).
+
Here is an example of a typical communication between the server and the client (described from the client perspective).
<source lang="javascript">
<source lang="javascript">
// Introduction packet, received just after connect to the server
// Introduction packet, received just after connect to the server
-
RECEIEVED {"from":"root","applicationType":"browser","traits":[]}
+
RECEIVED {"from":"root","applicationType":"browser","traits":[]}
// Request list of opened tabs on the server
// Request list of opened tabs on the server
Line 97: Line 52:
RECEIVED {"from":"conn2.tab2","type":"tabNavigated","url":"http://www.google.com/"}
RECEIVED {"from":"conn2.tab2","type":"tabNavigated","url":"http://www.google.com/"}
-
// Selected tab executed an HTTP request(s)
+
// Selected tab executed HTTP request(s)
-
RECEIVED: {"type":"notify","from":"conn2.networkMonitor4","serial":1,"files":[<list-of-request>]}
+
RECEIVED: {"type":"notify","from":"conn2.networkMonitor4","serial":1,"files":[<list-of-requests>]}
</source>
</source>
-
* <list-of-request>: represents a list of executed request in [http://www.softwareishard.com/blog/har-12-spec/ HAR] format.
+
* ''<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.
-
== Remote HTTP Protocol (RHP) Requirements ==
+
== HTTP Monitor Remote Protocol Requirements ==
-
This section summarizes requirements for the RHP protocol.
+
This section summarizes requirements for remote protocol.
-
# There should be a way to get list of opened tabs on the server
+
# 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
# It should be able to subscribe/unsubscribe to/from a tab
-
# The client should be able notified when the tab is navigated to a new URL or refreshed
+
# 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)
# 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
# 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)
# 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)
# 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 till: (a) there are sent to the client (do we need support for more subscribed clients at the same time?)
+
# The server should cache all data until:
-
# The server should cache all data till: (b) the tab is refreshed or navigated away (what about persistence across reloads?)
+
#*(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