electron-userland / devtron Goto Github PK
View Code? Open in Web Editor NEW[LOOKING FOR MAINTAINERS] An Electron DevTools Extension
Home Page: https://electronjs.org/devtron
License: MIT License
[LOOKING FOR MAINTAINERS] An Electron DevTools Extension
Home Page: https://electronjs.org/devtron
License: MIT License
Apparently, only requires from node_modules
are listed in the require graph. Your "own" modules from e.g. the src
directory are not shown.
I use require('devtron').install();
and the devtron tab loads just fine in devtools, but my own modules / files are not there:
I am using electron-webpack
, so there is an entire webpack setup hidden, may that be the cause?`
Or, is this just how devtron works and everything is normal here?
I would very much appreciate a require graph of own modules, especially in large-ish codebases.
It looks like devtron doesn't install correctly when the app is launched with the --enable-mixed-sandbox
flag. Is that expected?
Here's a portion of the launch.json:
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/src/main/main.js",
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
"runtimeArgs": [
"--enable-mixed-sandbox",
"."
],
"preLaunchTask": "build",
"env": {
"NODE_ENV": "unpackaged"
},
"args": [],
"protocol": "inspector"
When starting the app and running require("devtron").install()
, I get this output, and no devtron tab is added.
I am seeing a crash on OS X 10.11.5 when using devtron and certain BrowserWindow
config. To reproduce:
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install --save-dev devtron
Change the browser window config in main.js
to be:
mainWindow = new BrowserWindow({
width: 800, height: 600,
webPreferences: {
partition: 'persist:main'
}
})
Run the app
npm install && npm start
Open dev tools and start devtron
require('devtron').install()
Crash. Same thing occurs when passing a session to the webPreferences.
This can also be reproduced by adding webPreferences session persistence on an existing app that loads devtron in devtools.
Can it be considered deprecated?
Do we have better alternatives?
Currently this extension does not work if nodeIntegration
is set to false
for the current BrowserWindow
.
Add a custom message with instructions about how to use a preload script to expose the needed helpers to devtron so it can work properly in this configuration.
"Hide internal button" is useful, but it will be useful if we can filter events by channel name, something similar to the filter feature in console panel.
Heap snapshot view in the dev tools uses cmd-e
to maybe that is a good choice to reload the tables
For remote debugging, this was mentioned:
Set the DEVTRON_DEBUG_PATH environment variable to the path of the cloned devtron repository.
As I am new to environment variable, could you please show me exactly how to incorporate "DEVTRON_DEBUG_PATH" into the Command-Line Interface or Main.js (the starting JS file for Electron)?
Thank you for your help.
Explain each pane's function in the empty table area before it gets populated.
When I try to use devtron v1.4 (latest) with electron 2.0 and click Load Graph
, I met errors.
Also, I tested it with official page's quick start app.
It works fine with devtron v1.4 and electron v1.8.x
[8530:0508/153704.861660:ERROR:CONSOLE(1622)] "RangeError: Maximum call stack size exceeded
at JSON.parse (<anonymous>)
at EventEmitter.ipcRenderer.sendSync (/Users/doortts/repos/electron-quick-start/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/api/ipc-renderer.js:14:15)
at Object.descriptor.get [as children] (/Users/doortts/repos/electron-quick-start/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/api/remote.js:131:34)
at walkModule (<anonymous>:21:26)
at Array.map (<anonymous>)
at walkModule (<anonymous>:21:35)
at Array.map (<anonymous>)
at walkModule (<anonymous>:21:35)
at Array.map (<anonymous>)
at walkModule (<anonymous>:21:35)", source: chrome-extension://devtron/out/index.js (1622)
Add toolbar button to hide internal electron IPC events that can become noisy when you are trying to debug your own ipc events.
Views currently aren't removing their listeners when they are destroyed.
Make installation as easy as running require('devtron').install()
from the dev tools.
My app is spawning a local http server, and the renderer is simply fetching http://127.0.0.1:8036
.
I have this CORS error when using devtron. Is there anything we can do about it? Either you or me 😉?
Fetch API cannot load https://atom.io/download/atom-shell/index.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8036' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Probably a couple places where linking to the electron docs could be helpful for people.
With the following code:
window.setInterval(() => { console.log(navigator.getGamepads()); }, 500);
You will get a list of all available gamepads. However, if you run this in electron with two controllers attached, then remove the first controller listed, the second controller is also removed from the array.
Adding back the first controller adds both the first and second controller again.
If you run this code in chrome, unplugging player one does not disconnect player two.
Probably a bunch of places where title
attributes would be helpful for people.
npm i devtron fails on Windows 7.
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files (x86)\\Nodist\\v-x64\\6.9.1\\node.exe" "C:\\Pro
gram Files (x86)\\Nodist\\npmv\\3.10.9\\bin\\npm-cli.js" "i"
npm ERR! node v6.9.1
npm ERR! npm v3.10.9
npm ERR! shasum check failed for C:\Users\Waltem7\AppData\Local\Temp\npm-9204-634bd942\registry.npmjs.org\accessibility-developer-tools\-\accessibility-developer-tools-2.11.0.tgz
npm ERR! Expected: 2b669c802671672aed5c61c42a782082a2fc7d2c
npm ERR! Actual: 49770660ef11e155526eb2edfc9861b38247a78a
npm ERR! From: https://registry.npmjs.org/accessibility-developer-tools/-/ac
cessibility-developer-tools-2.11.0.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
Shows you warnings about things your app isn't doing but should do:
crashed
eventsunresponsive
eventsuncaughtException
events in main processHey! Devtron is awesome, but it's giving this warning in the Lint panel:
However, we do have a listener attached https://github.com/nylas/N1/blob/master/src/browser/nylas-window.coffee#L198, and I can verify that it's working properly by force-emitting a crashed event from the dev tools console within the window:
remote.getCurrentWebContents().emit('crashed')
Maybe it's not picking it up because the listener is in the main process and not within the renderer process?
Setup Travis once this repo is public
Hi there,
I clicked on a documentation link provided by the devtron linter and got the information displayed as a website. But now comes the tricky part: How to leave the webview to have the devtron tools available again? There is no back or close button, neither the usual browser commands for history back work.
Do I have to restart the application every time I click a link?! O.o
Best wishes.
Hi,
I have this very strange issue where when I start electron via npm run start
I get this error in console. see below.
my HTML :
<body >
<script>
if (window && window.process && window.process.versions['electron']) {
// is running inside electron not in web-browser
//
// http://electron.atom.io/docs/faq/#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron
// move window.module, window.require inserted in DOM becuase of electron-node integration
//
window.nodeRequire = window.require;
window.nodeExports = window.exports;
window.nodeModule = window.module;
delete window.exports;
delete window.module;
}
window.require = {
waitSeconds: 0,
urlArgs: 'bust=' + (new Date()).getTime()
};
</script>
<script src="./js/requirejs/require.js"></script>
</body>
ERROR:
require.js:168 Uncaught Error: Mismatched anonymous define() module: function () {
var COMPILED = !0, goog = goog || {};
goog.global = this;
goog.isDef = function(a) {
return void 0 !== a;
};
goog.exportPath_ = function(a, b, c) {
a = a.split(".");
c = c || goog.global;
a[0] in c || !c.execScript || c.execScript("var " + a[0]);
for (var d;a.length && (d = a.shift());) {
!a.length && goog.isDef(b) ? c[d] = b : c = c[d] ? c[d] : c[d] = {};
}
};
goog.define = function(a, b) {
var c = b;
COMPILED || (goog.global.CLOSURE_UNCOMPILED_DEFINES && Object.prototype.hasOwnProperty.call(goog.global.CLOSURE_UNCOMPILED_DEFINES, a) ? c = goog.global.CLOSURE_UNCOMPILED_DEFINES[a] : goog.global.CLOSURE_DEFINES && Object.prototype.hasOwnProperty.call(goog.global.CLOSURE_DEFINES, a) && (c = goog.global.CLOSURE_DEFINES[a]));
goog.exportPath_(a, c);
};
goog.DEBUG = !0;
goog.LOCALE = "en";
goog.TRUSTED_SITE = !0;
goog.STRICT_MODE_COMPATIBLE = !1;
goog.DISALLOW_TEST_ONLY_CODE = COMPILED && !goog.DEBUG;
goog.ENABLE_CHROME_APP_SAFE_SCRIPT_LOADING = !1;
goog.provide = function(a) {
if (goog.isInModuleLoader_()) {
throw Error("goog.provide can not be used within a goog.module.");
}
if (!COMPILED && goog.isProvided_(a)) {
throw Error('Namespace "' + a + '" already declared.');
}
goog.constructNamespace_(a);
};
Error is very long so i am just pasting few lines above.
New to programming electron and devtron
Tried Devtron with electron v1.1.3, there are no outputs for Event Listeners and IPC. Oddly, tried with electron v1.2.7 and v1.0.1, there are outputs for the Event Listeners but IPC still remains empty. Below are the outputs of Require Graph, Event listeners and IPC for the three electron versions.
Electron v1.1.3 Outputs
Electron v1.0.1 Outputs
Electron v1.2.7 Outputs
Would greatly appreciate if someone could point the steps in resolving this issue. Thanks!
This is how devtron is installed and uninstalled via the Main.js:
const app = require('electron').app;
const BrowserWindow = require('electron').BrowserWindow;
const cwd = require('electron').app.getAppPath();
var mainWindow = null;
app.on('ready', function() {
require('devtron').install();
mainWindow = new BrowserWindow({width: 1400, height: 800});
mainWindow.loadURL('file://' + cwd + '/Index.html');
mainWindow.webContents.openDevTools();
mainWindow.on('closed', function () {
mainWindow = null;
});
});
app.on('window-all-closed', function () {
require('devtron').uninstall();
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function () {
if (mainWindow === null) {
app.createWindow();
}
});
Highlight the part of the string that matches the filter text to make it easier to tell where the match happened.
Would it be possible to add the normal MIT electron license as a LICENSE file?
It would be nice for automated discovery of licensing when walking a node_modules dir for automatic generation of licenses.
With electron v1.1.3, Event listeners and IPC window do not display any output (after clicking load listeners). However, tried with electron version 1.2.7 and 1.0.1, there are outputs for the Event listeners. IPC remains empty.
This is how devtron is installed and uninstalled via the Main.js:
// Module to control application life.
const app = require('electron').app;
// Module to create browser window.
const BrowserWindow = require('electron').BrowserWindow;
// Module to extract application pathname.
/*
const cwd = process.cwd();
*/
const cwd = require('electron').app.getAppPath();
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', function() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 1400, height: 800});
// and load the index.html of the app.
// mainWindow.loadURL('file://' + __dirname + '/Index.html');
mainWindow.loadURL('file://' + cwd + '/Index.html');
// Open the DevTools.
mainWindow.webContents.openDevTools();
require('devtron').install();
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
});
// Quit when all windows are closed.
app.on('window-all-closed', function () {
require('devtron').uninstall();
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
app.createWindow();
}
});
"electron": "^2.0.3",
console errors:
[5968:0626/095527.874:ERROR:CONSOLE(4799)] "Cannot find context with specified id", source: chrome-devtools://devtoo
undled/inspector.js (4799)
[5968:0626/095527.874:ERROR:CONSOLE(7574)] "Extension server error: Inspector protocol error: Cannot find context wi
pecified id", source: chrome-devtools://devtools/bundled/inspector.js (7574)
[5968:0626/095527.878:ERROR:CONSOLE(1076)] "Getting IPC events failed", source: chrome-extension://devtron/out/index
(1076)
[5968:0626/095527.878:ERROR:CONSOLE(1077)] "[object Object]", source: chrome-extension://devtron/out/index.js (1077)
// public/electron.js
const { app, BrowserWindow, ipcMain } = require('electron');
const isDev = require('electron-is-dev');
function createWindow() {
mainWindow = new BrowserWindow({width: 900, height: 680});
mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
mainWindow.on('closed', () => mainWindow = null);
if (isDev) {
// dev tools
require('devtron').install(); // load devtron
mainWindow.webContents.openDevTools(); // load chrome dev tools
}
}
...
let onlineStatus;
// track online/offline status
ipcMain.on('online-status-changed', (event, status) => {
console.log(status);
onlineStatus = status;
});
// public/online.js <- loaded via script tag in index.html
const { ipcRenderer } = require('electron');
let onlineStatus = navigator.onLine;
const updateOnlineStatus = () => {
onlineStatus = navigator.onLine ? 'online' : 'offline';
ipcRenderer.send('online-status-changed', onlineStatus);
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
updateOnlineStatus();
I can see the console messages being sent back and forth between processes.
Hi
We've updated our electron app to 1.0.1, and npm installed devtron.
However the tab does not appear when running require('devtron').install() in the console.
Any ideas what we can check?
Thanks
Simon
Double clicking a file from the graph tab should open it.
❯ npm i
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
> [email protected] install /Users/zeke/electron/devtron/node_modules/fsevents
> node-pre-gyp install --fallback-to-build
[fsevents] Success: "/Users/zeke/electron/devtron/node_modules/fsevents/lib/binding/Release/node-v47-darwin-x64/fse.node" is installed via remote
> [email protected] install /Users/zeke/electron/devtron
> browserify lib/*.js -o out/index.js --ignore-missing --entry lib/index.js
events.js:154
throw er; // Unhandled 'error' event
^
Error: ENOENT: no such file or directory, open 'out/index.js'
at Error (native)
npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i"
npm ERR! node v5.8.0
npm ERR! npm v3.7.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] install: `browserify lib/*.js -o out/index.js --ignore-missing --entry lib/index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'browserify lib/*.js -o out/index.js --ignore-missing --entry lib/index.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the devtron package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! browserify lib/*.js -o out/index.js --ignore-missing --entry lib/index.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs devtron
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls devtron
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/zeke/electron/devtron/npm-debug.log
~/electron/devtron move-to-electron-org
❯ node -v
v5.8.0
~/electron/devtron move-to-electron-org
❯ npm -v
3.7.3
Include some sort of view for the details provided by http://electron.atom.io/docs/api/process/#processgetprocessmemoryinfo
I am unable to use devtron, only a blank page appears. and in the Terminal it shows
[15462:1022/132742:ERROR:CONSOLE(206)] "Uncaught SyntaxError: Unexpected token {", source: chrome-extension://extension-1/out/index.js (206)
Filter after a 100ms delay so typing lag does not occur when filtering lots of elements.
Currently the require graph scrolls correctly but events and ipc scroll the header bar as well which shouldn't happen.
Probably use alt-up
and alt-down
to switch the active pane similar to switching channels keybinding in Slack.
When running the quickstart example, everything works.
When using a setup similar to the one in this blog post, i.e. serving HTML through Webpack dev server, the 'devtron' module is not resolvable for me from renderer's process's Console (I can resolve it from main process's REPL when running electron with --interactive
).
To get around this, since it works from the main process, one can add: require('devtron').install()
in the main process's file, run it once and then remove it.
Is this worth documenting in README.md?
This appear to be a CSS issue. Even rows when clicked apperar with a blue background, while odd ones appear with a white background and a white foreground, making the text disappear.
When linting an existing App. Electron's current version is grabbed from https://atom.io/download/atom-shell/index.json
.
From the JSON array, the first element is returned which must not be the recent version. Currently it's treating 1.3.7
as the current version because it's the first element in the array. Version 1.4.1
is the second one in the array.
So the lint-helpers
should pay respect to the version
property of each release listed in the array/
Links to the repo, etc.
Currently if the window reloads, devtron does not refresh or rebuild the displayed information.
Test and make sure this extension runs for a <webview>
's dev tools.
This will require electron/electron#5913
So you can track when the event occurred for long recording sessions.
The DevTron tab only show up on the first time require('devtron').install()
. When you close the devtools, and open it again, you'll find the tab gone, and even if you recall the install()
it will not appear.
Syntax highlight JavaScript and JSON displayed in various places.
I'm not sure if this is because I'm using electron-prebuilt
or if something else is going on but I'm getting the following error in the main process when clicking 'Load Listeners':
[54624:0526/100818:ERROR:CONSOLE(413)] "Getting event listeners failed", source: chrome-extension://extension-1/out/index.js (413)
[54624:0526/100818:ERROR:CONSOLE(414)] "Error: value.hasOwnProperty is not a function
TypeError: value.hasOwnProperty is not a function
at valueToMeta (/Users/dave/code/forks/electron-react-boilerplate/node_modules/electron-prebuilt/dist/Electron.app/Contents/Resources/electron.asar/browser/rpc-server.js:70:22)
at EventEmitter.<anonymous> (/Users/dave/code/forks/electron-react-boilerplate/node_modules/electron-prebuilt/dist/Electron.app/Contents/Resources/electron.asar/browser/rpc-server.js:320:25)
at emitThree (events.js:116:13)
at EventEmitter.emit (events.js:194:7)
at EventEmitter.<anonymous> (/Users/dave/code/forks/electron-react-boilerplate/node_modules/electron-prebuilt/dist/Electron.app/Contents/Resources/electron.asar/browser/api/web-contents.js:139:25)
at emitTwo (events.js:106:13)
at EventEmitter.emit (events.js:191:7)
at valueToMeta (/Users/dave/code/forks/electron-react-boilerplate/node_modules/electron-prebuilt/dist/Electron.app/Contents/Resources/electron.asar/browser/rpc-server.js:70:22)
at EventEmitter.<anonymous> (/Users/dave/code/forks/electron-react-boilerplate/node_modules/electron-prebuilt/dist/Electron.app/Contents/Resources/electron.asar/browser/rpc-server.js:320:25)
at emitThree (events.js:116:13)
at EventEmitter.emit (events.js:194:7)
at EventEmitter.<anonymous> (/Users/dave/code/forks/electron-react-boilerplate/node_modules/electron-prebuilt/dist/Electron.app/Contents/Resources/electron.asar/browser/api/web-contents.js:139:25)
at emitTwo (events.js:106:13)
at EventEmitter.emit (events.js:191:7)
at metaToValue (/Users/dave/code/forks/electron-react-boilerplate/node_modules/electron-prebuilt/dist/Electron.app/Contents/Resources/electron.asar/renderer/api/remote.js:178:13)
at descriptor.get [as _events] (/Users/dave/code/forks/electron-react-boilerplate/node_modules/electron-prebuilt/dist/Electron.app/Contents/Resources/electron.asar/renderer/api/remote.js:127:16)
at getEvents (<anonymous>:23:26)
at <anonymous>:37:45
at <anonymous>:45:5
at <anonymous>:49:9
at Object.InjectedScript._evaluateOn (<anonymous>:145:167)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:137:25)
at Object.InjectedScript.evaluate (<anonymous>:118:14)", source: chrome-extension://extension-1/out/index.js (414)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.