How to include Chrome DevTools in Electron?

问题

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:

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.

回答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.

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

回答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"

回答5:

The name of the aplication is the name of the folder which contains all the tree of your aplication. 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, little rusty maybe)

回答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

回答7:

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
  }

来源：https://stackoverflow.com/questions/30294600/how-to-include-chrome-devtools-in-electron

标签

electron