Source code

Revision control

Copy as Markdown

Other Tools

# 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 [more]( to learn all the features and how to use the tool.
## UI
The Network Monitor UI is built using [React]( components (in `src/components/`).
* **MonitorPanel** in `MonitorPanel.js` is the root element.
* Three major container components are
- **Toolbar** Panel related functions.
- **RequestList** Show each request information.
- **NetworkDetailsBar** Show detailed information per request.
- **StatusBar** Show statistics while loading.
* `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 [reselect]( library to perform state calculations efficiently.