Comment inclure Chrome DevTools dans Electron?

Question

Je suis toujours nouveau chez Electron et je suis actuellement en train de suivre ici .

J'ai lu cette page concernant la procédure à suivre pour inclure Chrome DevTools afin de pouvoir déboguer facilement mon application. J'ai suivi la documentation, mais une fois que j'ai exécuté la commande electron <app-name>, une erreur s'est produite: The app provided is not a valid electron app, please read the docs on how to write one...

Voici le bloc de code de mon fichier main.js:

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

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

Voici à quoi ressemble la structure de mon projet:

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

Toute aide serait grandement appréciée. Merci!

Answer 1

Donc, après avoir demandé ce qui suit:

var app = require('app');

Vous pouvez utiliser le code suivant (je l'utilise dans mon application):

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

Accéder à l'adresse suivante me permet de déboguer l'application dans Chrome:

http://127.0.0.1:8315

J'espère que cela vous aide. Je suis aussi nouveau chez Electron!

Si vous devez également effectuer certaines configurations sur le moteur de navigateur sous-jacent, veuillez vous reporter à la documentation .

Answer 2

Peut-être que je ne comprends pas bien, mais vous pouvez simplement faire Ctrl + Maj + I pour afficher les outils de développement.

Ou bien si vous voulez le faire par programme, comme je le fais, incluez les lignes suivantes dans mon fichier main.js qui est passé à electron.

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

app.on('ready', function(){
    mainWindow = new BrowserWindow({width:800, height:600});
    mainWindow.webContents.openDevTools();
}

Je pense qu'une partie de votre problème peut être que vous n'attendez pas que l'application soit prête avant d'essayer de faire des choses avec.

Answer 3

vous pouvez ouvrir l'outil de développement comme ceci:

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

Très probablement, Electron ne peut pas comprendre le chemin d'accès au dossier d'application que vous avez fourni. Vous devez fournir le chemin relatif ou absolu du répertoire de l'application contenant package.json. Par exemple, si le fichier package.json de votre application se trouve à /home/user/my_awesome_app/package.json, pour lancer l'application, vous devez exécuter la commande suivante:

electron /home/user/my_awesome_app

Notez également que la propriété main dans le fichier package.json indique le point d'entrée de votre application. Dans votre cas, ça doit être comme ça:

 "main": "src/main.js"

Answer 5

Le nom de l'application est le nom du dossier qui contient tout l'arborescence de votre application. Donc, pour exécuter, vous devez écrire, au cas où votre dossier se nommerait Electron par exemple;

électron électronique

Toujours à l'invite dans le chemin où se trouve votre dossier . J'espère que cela vous aidera.

(Désolé pour mon anglais, peut-être un peu rouillé)

Answer 6

Voici une solution pour Electron> = 1.2.1 version

1- Dans votre dossier d'application

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

2- Ouvrez votre application électronique, cliquez sur (afficher/basculer les outils de développement). Dans l'onglet console, insérez le code suivant et tapez enter:

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

3- Rechargez/actualisez votre page d'application électronique et vous verrez apparaître les outils de développement de la réaction.

4- Fait!

---

Voir les captures d'écran ci-dessous