40

I'm still new to Electron which I'm currently following here.

I've read this page regarding on how to include the Chrome DevTools so that I can debug my application easily. I've followed the documentation but once I execute the electron <app-name> command it returns an error: The app provided is not a valid electron app, please read the docs on how to write one...

Here's the block of code from my main.js file:

var app = require('app');
var BrowserWindow = require('browser-window');

// Add Chrome DevTools extension for debugging
require('remote').require('browser-window').addDevToolsExtension('../react-devtools')

That is how my project structure looks like:

- react-devtools
- src
  -- index.html
  -- main.js
- package.json

Any help would be greatly appreciated. Thanks!

1
  • I know this question is geared towards why this error is showing up, and I am not sure if this differs from the dev tools extension, but try calling the .openDevTools() method on the BrowserWindow object you create and see if that gives you want you are looking for. Jun 3, 2015 at 3:40

9 Answers 9

56

Maybe I am misunderstanding, but you can just do ctrl + shift + I to pull up dev tools.

Or alternatively if you are wanting to do it programmatically, the way I do it is include the following lines in my main.js file that is passed to electron.

var app = require('app');
var BrowserWindows = require('browser-window');
    
app.on('ready', function(){
    mainWindow = new BrowserWindow({width:800, height:600});
    mainWindow.webContents.openDevTools();
}

I believe part of your problem may be that you aren't waiting for the app to be ready before you try to do stuff with it.

4
  • 1
    Where did you come up with Ctrl + Shift + I to open devtools?
    – pushkin
    Dec 7, 2018 at 22:25
  • Oh I see - that normally works in Chrome. However, in Electron it won't. You'd need to add a listener for the shortcut. The second part of your answer is correct though
    – pushkin
    Dec 7, 2018 at 23:21
  • Ctrl + Shift + I definitely still works up to Electron 2.0.0. I just double checked.
    – TrippLamb
    Dec 10, 2018 at 19:12
  • 2
    Huh, I do not observe that behavior. Maybe my settings don't allow it...
    – pushkin
    Dec 10, 2018 at 19:25
21

So, after you've required the following:

var app = require('app');

You can use the following code (I use it in my app):

app.commandLine.appendSwitch('remote-debugging-port', '8315');
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1');

Accessing the following address allows me to debug the application in Chrome:

http://127.0.0.1:8315

I hope this helps you out. I'm also new to Electron!

If you also need to do some configurations to the underlying browser engine, please, refer to the docs.

2
  • I found the second line unnecessary and at times causes comms errors. If you don't need it leave it out.
    – PeterS
    Feb 13, 2023 at 15:15
  • I just want to add my 2 cents: 1) Usually there is no need to add these lines into JavaScript sources - you can just add --remote-debugging-port=8315 to command line 2) After this open your Chrome/Chromium browser and enter URL chrome://inspect - there you can add localhost:8315 endpoint and connect to it. Mar 9, 2023 at 19:00
4

Press F12 to open DevTools when mainWindow.removeMenu() was used

ctrl + shift + i only works when the electron menu has not been removed. When you removed the menu with mainWindow.removeMenu(), you can add this to your main process code, to still be able to open the devtools with F12. To close the devTools with F12 you have to first click into your electron app so that the devtools window looses the focus.

myBrowserWindow.webContents.on('before-input-event', (_, input) => {
    if (input.type === 'keyDown' && input.key === 'F12') {
      myBrowserWindow.webContents.isDevToolsOpened()
        ? myBrowserWindow.webContents.closeDevTools()
        : myBrowserWindow.webContents.openDevTools({ mode: 'left' });
    }
});

if you do not need to change the devTools open mode you can use this instead:

myBrowserWindow.webContents.on('before-input-event', (_, input) => {
    if (input.type === 'keyDown' && input.key === 'F12') {
      myBrowserWindow.webContents.toggleDevTools();
    }
});

for mode: 'detach' pressing f12 again will not close the detached window, so you can can use this instead:

myBrowserWindow.webContents.on('before-input-event', (_, input) => {
    if (input.type === 'keyDown' && input.key === 'F12') {
      myBrowserWindow.webContents.openDevTools({ mode: 'detach' });
    }
});

source: https://www.electronjs.org/docs/latest/tutorial/keyboard-shortcuts#intercepting-events-in-the-main-process

3

you can open dev tool like this:

mainWindow = new BrowserWindow({ width: 1024, height: 768 });
mainWindow.loadURL('your url');
mainWindow.webContents.openDevTools();
mainWindow.webContents.on('devtools-opened', () => {
    setImmediate(() => {
        // do whatever you want to do after dev tool completely opened here
        mainWindow.focus();
    });
});
2

To enable opening dev tools via key strokes, I added this to my index.html:

<script>
    // for electron
    if (typeof require !== 'undefined') {
        const currentWebContents = require('electron').remote.getCurrentWebContents();
        document.addEventListener('keyup', ({ key, ctrlKey, shiftKey, metaKey, altKey }) => {
            if (
                key === 'F12' ||
                (ctrlKey && shiftKey && key === 'I') ||
                (metaKey && altKey && key === 'i')
            ) {
                currentWebContents.openDevTools();
            }
        });
    }
</script>

Be aware that this allows any user of the production electron app to access dev tools with the common keyboard shortcuts (function: F12 or ctrl + shift + I on PC, cmd + option + i on Mac).

One thing that did not work for me was passing this to the BrowserWindow constructor:

webPreferences: {
    devTools: true
}
0

Most likely, Electron can't understand the path to the application folder you provided. You must provide the relative or absolute path to the application directory that holds package.json in it. E.g., if package.json file of your app is located at /home/user/my_awesome_app/package.json then in order to start the app you must issue the following command:

electron /home/user/my_awesome_app

Also note that main property in package.json file indicates the entry point for your application. In your case it must be like this:

 "main": "src/main.js"
4
  • Yes, I've already done that part, I was able to run my app well. The problem only occurs when I try to add the react-devtools for debugging purposes. That's when the error pops out. May 19, 2015 at 0:56
  • What kind of error do you get when you call addDevToolsExtension? May 19, 2015 at 6:51
  • The app provided is not a valid electron app, please read the docs on how to write one..blabla it appears when I add the line require('remote').require('browser-window').addDevToolsExtension('../react-devtools') You can refer to my project structure above for reference. May 19, 2015 at 8:26
  • Oh, I did not notice one important fact first. remote module is used for remote method invocation of main process from renderer process. It doesn't work vice versa. It must be clear for you that browser-window is created in the main process and is controlled by the main process. So, in order to add React developer tools from the renderer you should issue the same command on the renderer's side (e.g., inside index.html): require('remote').require('browser-window').addDevToolsExtension('react-devt‌​ools'). May 19, 2015 at 9:12
0

The name of the application is the name of the folder which contains all the tree of your application. So, to execute, you have to write, in case your folder is named Electron for example;

electron Electron

Always in prompt in the path that your folder is located. Hope this help.

(Sorry for my English, a little rusty)

0

Here is a Solution for Electron >= 1.2.1 version

1- In your app folder

npm install --save-dev electron-react-devtools

2- Open your electron app, click on (view/toggle developer tools). In the console tab insert the following code and hit enter:

require('electron-react-devtools').install()

3- Reload/refresh your electron app page and you'll see the react dev tools appear.

4- Done!


See screen shots bellow

Paste/type code on console tab

hit enter

react dev tools enabled

0

I know this might not be how to install devtools, but i found the alert is rewired in the electron for the webviews. What that means is that anytime you can shoot this to see simple style.

  alert('123')

For complex stuff, i believe webview also has a executeJavascript function, maybe you can run console.log there.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.