Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 00:05:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
658b39b268
gecko-dev/devtools/client/netmonitor
History
Bogdan Tara 444fb855c6 Backed out changeset 82396fd59d58 (bug 1566755) for ES lint failure on wamp/serializers.js CLOSED TREE
2020-01-10 12:16:01 +02:00
..
src Backed out changeset 82396fd59d58 (bug 1566755) for ES lint failure on wamp/serializers.js CLOSED TREE 2020-01-10 12:16:01 +02:00
test Bug 1587086 - Add a listener to be able to "Copy" (ctrl/cmd+c) a selected url to the clipboard r=Honza 2020-01-10 09:13:00 +00:00
.eslintrc.js Bug 1558517 - Pre 3.0: Remove conflicting eslint rules, and turn on "curly: all" everywhere, r=standard8 2019-06-28 17:14:01 +02:00
index.html
initializer.js Bug 1596686 - Use absolute paths for require calls r=gl 2019-12-27 12:23:47 +00:00
moz.build
panel.js Bug 1559347 - Implement generic search across all resources. r=Honza 2019-08-07 15:58:21 +00:00
README.md Bug 1567084 - Remove files related to running netmonitor with launchpad/chrome r=Honza 2019-07-18 10:33:57 +00: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 all the features and 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.

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/connector/ wrap function call for Browser specific API. Current support Firefox and Chrome(experimental).

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.
    • NetworkDetailsPanel 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.