├── .npmignore
├── .github
└── screenshots
│ └── window.png
├── src
├── index.js
├── ui
│ ├── index.js
│ ├── ToolBar.js
│ ├── ProcessTableHeader.js
│ ├── ProcessRow.js
│ ├── ProcessTable.js
│ └── ProcessManager.js
├── ProcessManager.js
└── ProcessManagerWindow.js
├── example
├── package.json
├── index.html
└── main.js
├── process-manager.html
├── webpack.config.js
├── tests
└── test.js
├── .gitignore
├── package.json
├── README.md
└── vendor
└── photon.css
/.npmignore:
--------------------------------------------------------------------------------
1 | /.git
2 | /example
3 | npm-debug.log
4 | node_modules
5 |
--------------------------------------------------------------------------------
/.github/screenshots/window.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/getstation/electron-process-manager/HEAD/.github/screenshots/window.png
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | var ProcessManager = require('./ProcessManager.js');
2 |
3 | // singleton
4 | module.exports = new ProcessManager();
5 |
--------------------------------------------------------------------------------
/src/ui/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 |
4 | import ProcessManager from './ProcessManager';
5 |
6 | render(, document.getElementById('app'));
7 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "electron-process-manager-example-app",
3 | "version": "0.0.1",
4 | "description": "An example application for electron-process-manager module",
5 | "main": "main.js",
6 | "private": true
7 | }
8 |
--------------------------------------------------------------------------------
/process-manager.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Process Manager
6 |
7 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Example
6 |
7 |
8 | We are using Node.js ,
9 | Chromium ,
10 | and Electron .
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const path = require('path');
3 |
4 | const BUILD_DIR = path.resolve(__dirname, 'dist');
5 |
6 | const config = {
7 | entry: path.resolve(__dirname, 'src/ui/index.js'),
8 | target: 'electron-renderer',
9 | output: {
10 | path: BUILD_DIR,
11 | filename: 'ui-bundle.js'
12 | },
13 | module: {
14 | rules: [
15 | {
16 | test: /\.(jsx|js)?$/,
17 | include: path.resolve(__dirname, 'src/ui'),
18 | use: [
19 | {
20 | loader: 'babel-loader',
21 | options: {
22 | presets: [
23 | '@babel/preset-env',
24 | '@babel/preset-react'
25 | ],
26 | }
27 | }
28 | ]
29 | }
30 | ]
31 | },
32 | };
33 |
34 | module.exports = config;
35 |
--------------------------------------------------------------------------------
/src/ui/ToolBar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export default class ToolBar extends React.Component {
5 |
6 | static propTypes = {
7 | onKillClick: PropTypes.func,
8 | disableKill: PropTypes.bool,
9 | onOpenDevToolClick: PropTypes.func,
10 | disabelOpenDevTool: PropTypes.bool
11 | }
12 |
13 | render() {
14 | return (
15 |
16 |
17 |
24 |
31 |
32 |
53 | {this.props.children}
54 |
55 | {this.getSortCharacter()}
56 | |
57 | )
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
1 | var { app, shell, BrowserWindow, Menu, ipcMain } = require('electron');
2 | var join = require('path').join;
3 |
4 | var processManager = require('..');
5 | const defaultMenu = require('electron-default-menu');
6 |
7 | processManager.on('killed-process', pid => console.log('Killed process', pid));
8 |
9 | app.once('window-all-closed', function () { app.quit(); });
10 |
11 | app.once('ready', function () {
12 | var w = new BrowserWindow({
13 | webPreferences: {
14 | nodeIntegration: true,
15 | webviewTag: true,
16 | contextIsolation: false,
17 | },
18 | });
19 | w.once('closed', function () { w = null; });
20 | w.loadURL('file://' + join(__dirname, 'index.html'));
21 |
22 | const menu =
23 | defaultMenu(app, shell)
24 | .map(menu => {
25 | if (menu.label === 'Window') {
26 | menu.submenu.push({
27 | label: 'Open Process Manager',
28 | click: () => processManager.open({
29 | defaultSorting: {
30 | path: 'cpu.percentCPUUsage',
31 | how: 'descending'
32 | }
33 | })
34 | })
35 | }
36 | return menu;
37 | });
38 |
39 | Menu.setApplicationMenu(Menu.buildFromTemplate(menu));
40 | });
41 |
42 | if (process.env.TEST_PROCESS_MANAGER) {
43 | // emulate click on menu item
44 | ipcMain.on('open-process-manager', () => processManager.open());
45 |
46 | process.on('uncaughtException', function (error) {
47 | console.error(error, error.stack);
48 | process.exit(1);
49 | });
50 |
51 | }
52 |
--------------------------------------------------------------------------------
/src/ui/ProcessRow.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import filesize from 'filesize';
4 | import format from 'format-number';
5 |
6 | const KB = 1024;
7 | const formatPercentage = format({
8 | round: 1,
9 | padRight: 1
10 | });
11 |
12 | export default class ProcessRow extends React.Component {
13 | static propTypes = {
14 | pid: PropTypes.number,
15 | type: PropTypes.string,
16 | memory: PropTypes.shape({
17 | peakWorkingSetSize: PropTypes.number,
18 | workingSetSize: PropTypes.number
19 | }),
20 | cpu: PropTypes.shape({
21 | percentCPUUsage: PropTypes.number,
22 | idleWakeupsPerSecond: PropTypes.number
23 | }),
24 | webContents: PropTypes.arrayOf(PropTypes.shape({
25 | id: PropTypes.number,
26 | type: PropTypes.string,
27 | URL: PropTypes.string,
28 | URLDomain: PropTypes.string
29 | })),
30 | selected: PropTypes.bool,
31 | onSelect: PropTypes.func
32 | }
33 |
34 | render() {
35 | const { webContents, memory } = this.props;
36 | if (!webContents || webContents.length === 0) {
37 | return (
38 |
42 | | {this.props.pid} |
43 | |
44 | {this.props.type} |
45 | {memory ? filesize(memory.workingSetSize*KB) : 'N/A'} |
46 | {formatPercentage(this.props.cpu.percentCPUUsage)} |
47 | {this.props.cpu.idleWakeupsPerSecond} |
48 | |
49 | |
50 | |
51 |
52 | )
53 | } else {
54 | // FIX ME: we consider we have only have 1 webContents per process
55 | const wc = webContents[0];
56 |
57 | return (
58 |
62 | | {this.props.pid} |
63 | {wc.URLDomain} |
64 | {this.props.type} |
65 | {memory ? filesize(memory.workingSetSize*KB) : 'N/A'} |
66 | {formatPercentage(this.props.cpu.percentCPUUsage)} |
67 | {this.props.cpu.idleWakeupsPerSecond} |
68 | {wc.id} |
69 | {wc.type} |
70 | {wc.URL} |
71 |
72 | )
73 | }
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/ProcessManagerWindow.js:
--------------------------------------------------------------------------------
1 | const { app, BrowserWindow, ipcMain } = require('electron');
2 | const path = require('path');
3 | const { onExtendedProcessMetrics } = require('@getstation/electron-process-reporter');
4 |
5 | class ProcessManagerWindow extends BrowserWindow {
6 |
7 | constructor(options) {
8 | const winOptions = Object.assign({
9 | width: 800,
10 | height: 300,
11 | useContentSize: true,
12 | webPreferences: {
13 | nodeIntegration: true,
14 | contextIsolation: false,
15 | }
16 | }, options || {});
17 |
18 | super(winOptions);
19 | this.options = options;
20 |
21 | this.attachProcessReporter();
22 |
23 | const indexHtml = 'file://' + path.join(__dirname, '..', 'process-manager.html');
24 | this.loadURL(indexHtml);
25 | }
26 |
27 | showWhenReady = () => {
28 | this.once('ready-to-show', () => {
29 | this.show();
30 | });
31 | }
32 |
33 | sendStatsReport = (reportData) => {
34 | if (!this.webContents) return;
35 | this.webContents.send('process-manager:data', reportData);
36 | }
37 |
38 | openDevTools = () => {
39 | this.webContents.openDevTools();
40 | }
41 |
42 | onOpenDevTools = (e, webContentsId) => {
43 | // ignore if not for us
44 | if (!this || this.isDestroyed()) return;
45 | if (e.sender !== this.webContents) return;
46 |
47 | this.emit('open-dev-tools', webContentsId);
48 | }
49 |
50 | onKillProcess = (e, pid) => {
51 | // ignore if not for us
52 | if (!this || this.isDestroyed()) return;
53 | if (e.sender !== this.webContents) return;
54 |
55 | this.emit('kill-process', pid);
56 | }
57 |
58 | attachProcessReporter = () => {
59 | this.subscription = onExtendedProcessMetrics(app)
60 | .subscribe(report => this.sendStatsReport(report))
61 | ipcMain.on('process-manager:kill-process', this.onKillProcess);
62 | ipcMain.on('process-manager:open-dev-tools', this.onOpenDevTools);
63 | ipcMain.handle('process-manager:defaultSorting', () => {
64 | return this.options.defaultSorting;
65 | });
66 |
67 | this.on('closed', () => {
68 | if (this.subscription) {
69 | this.subscription.unsubscribe();
70 | }
71 | ipcMain.removeHandler('process-manager:defaultSorting');
72 | ipcMain.off('process-manager:kill-process', this.onKillProcess);
73 | ipcMain.off('process-manager:open-dev-tools', this.onOpenDevTools);
74 | });
75 | }
76 | }
77 |
78 | module.exports = ProcessManagerWindow;
79 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Process Manager UI for Electron Apps
2 |
3 | This package provides a process manager UI for Electron applications.
4 |
5 | It opens a window displaying a table of every processes run by the Electron application with information (type, URL for `webContents`, memory..).
6 |
7 | [](https://badge.fury.io/js/electron-process-manager)
8 |
9 | 
10 |
11 | :warning: For `@electron>=3.0.0, <7.x`, use version `0.7.1` of this package.
12 | For versions `>=7.x`, use latest.
13 |
14 | It can be useful to debug performance of an app with several `webview`.
15 |
16 | It's inspired from Chrome's task manager.
17 |
18 | ## Features
19 |
20 | - [ ] Memory reporting
21 | - [ ] Link memory data to web-contents (for electron >=1.7.1)
22 | - [x] Kill a process from the UI
23 | - [x] Open developer tools for a given process
24 | - [x] CPU metrics
25 | - [x] Sort by columns
26 |
27 | ⚠️ Unfortunately, memory info are no longer available in Electron>=4 (see [electron/electron#16179](https://github.com/electron/electron/issues/16179))
28 |
29 | ## Installation
30 |
31 | ```bash
32 | $ npm install electron-process-manager
33 | ```
34 |
35 | ## Usage
36 | ```js
37 | const { openProcessManager } = require('electron-process-manager');
38 |
39 | openProcessManager();
40 | ```
41 |
42 | ## Options
43 | `openProcessManager` function can take options in paramters
44 |
45 | #### options.defaultSorting
46 | **defaultSorting.how**: `'ascending' | 'descending'`
47 |
48 | **defaultSorting.path**:
49 |
50 | | Field name | path |
51 | |--------------------|----------------------------|
52 | | Pid | 'pid' |
53 | | WebContents Domain | 'webContents.0.URLDomain' |
54 | | Process Type | 'webContents.0.type' |
55 | | Private Memory | 'memory.privateBytes' |
56 | | Shared Memory | 'memory.sharedBytes' |
57 | | Working Set Size | 'memory.workingSetSize' |
58 | | % CPU | 'cpu.percentCPUUsage' |
59 | | Idle Wake Ups /s | 'cpu.idleWakeupsPerSecond' |
60 | | WebContents Id | 'webContents.0.id' |
61 | | WebContents Type | 'webContents.0.type' |
62 | | WebContents URL | 'webContents.0.URL' |
63 |
64 | example:
65 | ```js
66 | const { openProcessManager } = require('electron-process-manager');
67 |
68 | openProcessManager({ how: 'descending', path: 'cpu.percentCPUUsage' });
69 | ```
70 |
71 | ## Future
72 |
73 | - Add physical memory (noted as "Memory" in Chrome's task manager)
74 | - Add networks metrics
75 |
76 | Pull requests welcome :)
77 |
78 | ## License
79 |
80 | MIT License
81 |
--------------------------------------------------------------------------------
/src/ui/ProcessTable.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import ProcessRow from './ProcessRow';
5 | import ProcessTableHeader from './ProcessTableHeader';
6 |
7 | export default class ProcessTable extends React.Component {
8 | static propTypes = {
9 | processData: PropTypes.arrayOf(PropTypes.object),
10 | selectedPid: PropTypes.number,
11 | sorting: PropTypes.PropTypes.shape({
12 | path: PropTypes.string,
13 | how: PropTypes.string
14 | }),
15 | onSortingChange: PropTypes.func,
16 | onSelectedPidChange: PropTypes.func
17 | }
18 |
19 | render() {
20 | return (
21 |
22 |
23 |
24 | Pid
29 |
30 | WebContents Domain
35 |
36 | Process Type
41 |
42 | Working Set Size
47 |
48 | % CPU
53 |
54 | Idle Wake Ups /s
59 |
60 | WebContents Id
65 |
66 | WebContents Type
71 |
72 | WebContents URL
77 |
78 |
79 |
80 | {
81 | this.props.processData.map(p =>
82 | this.props.onSelectedPidChange(p.pid)}
86 | selected={this.props.selectedPid === p.pid}
87 | />
88 | )
89 | }
90 |
91 |
92 | )
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/src/ui/ProcessManager.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ipcRenderer } from 'electron';
3 | import objectPath from 'object-path';
4 |
5 | import ProcessTable from './ProcessTable';
6 | import ToolBar from './ToolBar';
7 |
8 | export default class ProcessManager extends React.Component {
9 |
10 | constructor(props) {
11 | super(props);
12 | this.state = {
13 | processData: null,
14 | selectedPid: null,
15 | sorting: {
16 | path: null,
17 | how: null
18 | }
19 | };
20 | }
21 |
22 | UNSAFE_componentWillMount() {
23 | ipcRenderer.invoke('process-manager:defaultSorting')
24 | .then(defaultSorting => {
25 | this.setState({ sorting: defaultSorting })
26 | });
27 | ipcRenderer.on('process-manager:data', (_, data) => {
28 | this.setState({ processData: data });
29 | })
30 | }
31 |
32 | canKill() {
33 | if (!this.state.selectedPid) return false;
34 | const pids = this.state.processData.map(p => p.pid);
35 |
36 | // verify that select pid is in list of processes
37 | return pids.indexOf(this.state.selectedPid) !== -1;
38 | }
39 |
40 | canOpenDevTool() {
41 | return this.canKill() && this.getWebContentsIdForSelectedProcess() !== null;
42 | }
43 |
44 | getWebContentsIdForSelectedProcess() {
45 | const { processData, selectedPid } = this.state;
46 | if (!selectedPid) return null;
47 |
48 | const process = processData.find(p => p.pid === selectedPid);
49 | if (!process || !process.webContents || process.webContents.length === 0) return null;
50 |
51 | return process.webContents[0].id;
52 | }
53 |
54 | handleKillProcess() {
55 | const pid = this.state.selectedPid;
56 | if (!pid) return;
57 | ipcRenderer.send('process-manager:kill-process', pid);
58 | }
59 |
60 | handleOpenDevTool() {
61 | const webContentsId = this.getWebContentsIdForSelectedProcess();
62 | ipcRenderer.send('process-manager:open-dev-tools', webContentsId);
63 | }
64 |
65 | getProcessData() {
66 | const { processData, sorting } = this.state;
67 |
68 | if (!sorting.path || !sorting.how) return processData;
69 |
70 | return processData.sort((p1, p2) => {
71 | const p1Metric = objectPath.get(p1, sorting.path);
72 | const p2Metric = objectPath.get(p2, sorting.path);
73 |
74 | if (p1Metric === p2Metric) return 0;
75 | const comp = p1Metric < p2Metric ? -1 : 1;
76 |
77 | return sorting.how == 'ascending' ? comp : -comp;
78 | });
79 | }
80 |
81 | render () {
82 | const { processData } = this.state;
83 | if (!processData) return (No data);
84 |
85 | return (
86 |
87 |
96 |
97 |
this.setState({ sorting })}
102 | onSelectedPidChange={pid => this.setState({ selectedPid: pid })}
103 | />
104 |
105 |