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.
- node >= 6.9.x
- npm >= 3.x
- yarn >= 0.21.x
- Firefox either the released version or build from source code
npm included) is installed, use the following command to install
$ npm install -g yarn
Assume you are in
# 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
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.
about:config in Firefox URL field, grant the warning to access preferences.
devtools.debugger.prompt-connectionpreference to enable connection without prompt.
devtools.debugger.remote-enabledpreference 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
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.
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.
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.jscalled by devtools toolbox to launch the Network Monitor panel
index.htmlpanel 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
index.jsthe entry point, equivalent to
webpack.config.jsthe webpack config file to help
package.jsondeclare every required packages and available commands
Network Monitor's UI is constructed by React components(in
- MonitorPanel in
monitor-panel.jsis the root element.
- Three major container components are
- Toolbar Panel related functions.
- RequestList Show each request information.
- NetworkDetailsPanel Show detailed infomation per request.
src/assetsStyles 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.
Besides the UI, Network Monitor manage states via Redux. Here are places to check when you want to change state.
src/constants.jssite 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.