mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность
gecko-dev/devtools/client/netmonitor
История
Narcis Beleuzu b17ae2fa0e Bug 1547150 - Disable browser_net_truncate-post-data.js on Win7. r=jmaher 
Differential Revision: https://phabricator.services.mozilla.com/D32694

--HG--
extra : moz-landing-system : lando
 		2019-05-28 13:31:52 +00:00
..
bin Bug 1454696 - Run eslint --fix for prefer-const;r=yulia 2018-06-01 12:36:09 +02:00
configs Bug 1442236 - Update console and netmonitor launchpads to v0.0.117; r=Honza. 2018-03-01 15:32:19 +01:00
src Bug 1157817 - Show blocked requests in the Network Monitor r=Honza,Harald 2019-05-28 12:13:08 +00:00
test Bug 1547150 - Disable browser_net_truncate-post-data.js on Win7. r=jmaher 2019-05-28 13:31:52 +00:00
.babelrc Bug 1431457 - Upgrade Netmonitor to the latest Launchpad version; r=ochameau 2018-01-22 12:32:57 +01:00
.eslintrc.js Bug 1463089 - Remove deprecated experimentalObjectRestSpread option from netmonitor's .eslintrc.js file, and clean it up. r=Honza 2018-05-21 12:20:37 +01:00
README.md Bug 1527826 - Reflect our github org name change in the m-c code; r=nchevobbe 2019-02-15 09:38:53 +00:00
index.html Bug 1471152 - Package all panel scripts under resource://devtools/ instead of chrome://devtools/. r=jdescottes 2018-06-25 12:59:22 -07:00
initializer.js Bug 1514594: Part 3 - Change ChromeUtils.import API. 2019-01-17 10:18:31 -08:00
launchpad.js Sumary: Bug 862851 - Swap the Domain and File columns in the network panel r=Honza 2018-10-30 16:44:15 +00:00
moz.build Bug 1471152 - Package all panel scripts under resource://devtools/ instead of chrome://devtools/. r=jdescottes 2018-06-25 12:59:22 -07:00
package.json Bug 1539530 - Setting up Jest tests with Task Cluster r=Honza 2019-04-17 11:13:42 +00:00
panel.js Bug 1397020 - Remove useless calls to TabTarget.attach r=yulia 2018-09-26 21:11:51 +00:00
webpack.config.js Bug 1527322 - Move the sourceeditor folder under devtools/client/shared; r=gl. 2019-02-13 15:37:08 +00:00
yarn.lock Bug 1539530 - Setting up Jest tests with Task Cluster r=Honza 2019-04-17 11:13:42 +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).

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