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 applicati

Answer 1

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)

Answer 2

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 3

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 4

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"

Answer 5

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
}

Answer 6

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