gecko-dev/devtools/client/netmonitor
Wes Kocher c0e1236f1a Merge autoland to m-c a=merge
MozReview-Commit-ID: LFtpTAueYrF
2017-06-20 18:24:29 -07:00
..
bin Bug 1352699 - Make netmonitor run on devtools-launchpad r=Honza 2017-04-01 23:01:06 +08:00
configs Bug 1350217 - Introduce webpack.config.js r=Honza 2017-03-29 14:30:34 +08:00
src Merge autoland to m-c a=merge 2017-06-20 18:24:29 -07:00
test Bug 1242505 - Detect unhandled rejections of native Promises in browser-chrome tests. r=Mossop 2017-06-18 08:05:06 +01:00
.eslintrc.js Bug 1309183 - Replace XUL Splitter by SplitBox r=Honza 2017-02-11 09:34:53 +08:00
README.md Bug 1361708 - Update docs in readme.md; r=Honza 2017-05-03 15:26:57 +02:00
index.html Bug 1366723 - Fix URL of netmonitor.css r=ochameau 2017-05-23 18:02:39 +02:00
index.js Bug 1356871 - Add timing related columns. r=Honza 2017-05-01 23:02:10 +03:00
moz.build Bug 1350215 - Merge toolbox launcher in index.html r=Honza 2017-03-26 21:37:16 +08:00
package.json Bug 1359448 - Lock down devtools-core package r=gasolin 2017-04-26 14:51:40 +08:00
panel.js Bug 1350215 - Merge toolbox launcher in index.html r=Honza 2017-03-26 21:37:16 +08:00
webpack.config.js Bug 1354504 - Add autocomplete to network monitor search box. r=jdescottes, ntim 2017-05-11 04:25:00 +01:00
yarn.lock Bug 1359448 - Lock down devtools-core package r=gasolin 2017-04-26 14:51:40 +08:00

README.md

Network Monitor

The Network Monitor (netmonitor) shows you all the network requests Firefox makes (for example, when a page is loaded or when an XMLHttpRequest is performed) , how long each request takes, and details of each request. You can edit the method, query, header and resend the request as well. Read MDN to learn how to use the tool.

Prerequisite

If you want to build the Network Monitor inside of the DevTools toolbox (Firefox Devtools Panels), follow the simple Firefox build document in MDN. Start your compiled firefox and open the Firefox developer tool, you can see the Network Monitor inside.

If you would like to run the Network Monitor in the browser tab (experimental), you need following packages:

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

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

$ npm install -g yarn

Quick Setup

Navigate to the mozilla-central/devtools/client/netmonitor folder with your terminal. Note that this folder is available after mozilla-central was cloned in order to get a local copy of the repository. Then run the following commands:

# 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 an opened Firefox browser, you can manually configure Firefox as well.

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

  • disable devtools.debugger.prompt-connection to remove the connection prompt.
  • enable devtools.debugger.remote-enabled to allow remote debugging a browser tab via the 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 Firefox act as a remote debugging server.

Then run the command

yarn start

How it works

The Network Monitor uses webpack and several packages from devtools-core to run the Network Monitor as a normal web page. The Network Monitor uses 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 Firefox (the remote debugging server) and list all opened tabs from Firefox. Click one of the browser tab entry, now you can see the Network Monitor runs in a browser tab.

When working on make the Network Monitor running in the browser tab, you may need to work on external modules. Besides the third party modules, here are modules required for the Network Monitor and is hosted under devtools-html (modules shared accross Devtools):

Do yarn link modules in related module directory, then do yarn link [module-name] after yarn install modules.

Code Structure

Top level files are used to launch the Network Monitor inside of the DevTools toolbox or run in the browser tab (experimental). The Network Monitor source is mainly located in the src/ folder, the same code base is used to run in both environments.

We prefer use web standard API instead of FIrefox specific API, to make the Network Monitor can be opened in any browser tab.

Run inside of the DevTools toolbox

Files used to run the Network Monitor inside of the DevTools toolbox.

  • panel.js called by devtools toolbox to launch the Network Monitor panel.
  • index.html panel UI and launch scripts.
  • src/utils/firefox/ wrap function call for Firefox specific API. Files in this folder should provide alias in webpack.config.js to mock or polyfill those function call. Therefore run the Network Monitor in the browser tab would work.

Run in the browser tab (experimental)

Files used to run the 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, including plenty of module alias map to shims and polyfills.
  • package.json declare every required packages and available commands.

To run in the browser tab, the Network Monitor needs to get some dependencies from npm module. Check package.json to see all dependencies. Check webpack.config.js to find the module alias, and check devtools-core packages to dive into actual modules used by the Network Monitor and other Devtools.

UI

The Network Monitor UI is built using 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 the 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, the Network Monitor manages the app state via Redux. The following locations define the app state:

  • src/constants.js constants used across the tool including action and event names.
  • src/actions/ for all actions that change the state.
  • src/reducers/ for all reducers that change the state.
  • src/selectors/ functions that return a formatted version of parts of the app state.

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