How to include Chrome DevTools in Electron?

Question

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!

Answer 1

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.

Answer 2

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.

Answer 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();
    });
});

Answer 4

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
}