Netmonitor.md

Network Monitor

The Network Monitor(netmonitor) shows you all the network requests Firefox makes (for example, when it loads a page, or due to XMLHttpRequests), how long each request takes, and details of each request.

Prerequisite

• node >= 6.9.x
• npm >= 3.x
• yarn >= 0.21.x
• Firefox either the released version or build from source code

Once node(npm included) is installed, use the following command to install yarn.

$ npm install -g yarn

Quick Setup

Assume you are in netmonitor folder

# Install packages
yarn install

# Create a dev server instance for hosting netmonitor on browser
yarn start

# Run firefox
firefox http://localhost:8000 --start-debugger-server 6080

Then open localhost:8000 in any browser to see all tabs in Firefox.

More detailed setup

If you have a opened Firefox browser, you can manually config Firefox as well.

Type about:config in Firefox URL field, grant the warning to access preferences.

• disable devtools.debugger.prompt-connection preference to enable connection without prompt.
• enable devtools.debugger.remote-enabled preference to allow running mozilla remote debugging protocol(rdp)

Go to the Web Developer menu in Firefox and select Developer Toolbar. Run the command

listen 6080 mozilla-rdp

The command will make your Firefox act as a remote debugging server.

Then run the command

yarn start

How it works

Network Monitor use webpack and several packages from devtools-core to run Network Monitor as a normal web page. Network Monitor use Mozilla remote debugging protocol to fetch result and execute commands from Firefox browser.

Open localhost:8000 in any browser to see the launchpad interface. Devtools Launchpad will communicate with your Firefox(the remote debugging server) and list all opened tabs from your Firefox browser. Click one of the browser tab entry, now you can see Network Monitor runs in a browser tab.

Code Structure

Network Monitor source is mainly located in src/ folder. Files located on the top level of code base are used to launch Network Monitor inside of the Firefox Devtools Panel or run in the browser tab(experimental).

Run inside of the Firefox Devtools Panel

Files use to run Network Monitor inside of the Firefox Devtools panel.

• panel.js called by devtools toolbox to launch the Network Monitor panel
• index.html panel UI and launch scripts

Run in the browser tab (experimental)

Files use to run Network Monitor in the browser tab

• bin/ files to launch test server
• configs/ dev configs
• index.js the entry point, equivalent to index.html
• webpack.config.js the webpack config file to help
• package.json declare every required packages and available commands

UI

Network Monitor's UI is constructed by React components(in src/components/).

• MonitorPanel in monitor-panel.js is the root element.
• Three major container components are
  • Toolbar Panel related functions.
  • RequestList Show each request information.
  • NetworkDetailsPanel Show detailed infomation per request.
• src/assets Styles that affect Network Monitor panel.

We prefer stateless component(define by function) instead of stateful component(define by class) unless the component has to maintain its internal state.

State

Besides the UI, Network Monitor manage states via Redux. Here are places to check when you want to change state.

• src/constants.js site wide constants includes action and event name.
• src/actions/ for all actions that change the state.
• src/reducers/ for all reducers that change the state.
• src/selectors/ all selectors to help select a network request.

We use immutable.js and reselect libraries to return new state object efficiently.