Comment inclure Chrome DevTools dans Electron?

Je suis encore nouveau pour d'Électrons qui je suis en train de faire des ici.

J'ai lu ce page sur la façon d'inclure le Chrome DevTools afin que je puisse déboguer mon application facilement. J'ai suivi la documentation, mais une fois que j'exécute les electron <app-name> commande retourne une erreur: The app provided is not a valid electron app, please read the docs on how to write one...

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

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

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

Voilà comment mon projet de la structure ressemble à:

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

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

source d'informationauteur Renesansz

  1. 9

    Donc, après vous avez des exigences suivantes:

    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 google Chrome:

    http://127.0.0.1:8315

    J'espère que cela vous aide. Je suis aussi nouvelle de l'Électron!

    Si vous avez aussi besoin de faire quelques configurations pour le moteur de navigateur, veuillez vous référer à les docs.

  2. 6

    Je suis peut-être un malentendu, mais il vous suffit de faire ctrl + maj + I pour extraire les outils de dev.

    Ou alternativement, si vous êtes désireux de le faire par programmation, la façon dont je le fais, c'est d'inclure les lignes suivantes dans mon main.js fichier qui est transmis à l'électron.

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

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

    Je crois qu'une partie de votre problème peut être que vous n'êtes pas d'attente pour l'application afin d'être prêt avant de vous essayer de faire des trucs avec elle.

  3. 1

    vous pouvez ouvrir dev outil 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();
    });
});
  4. 0

    Le plus probable, l'Électron ne peut pas comprendre le chemin d'accès au dossier de l'application que vous avez fournis. Vous devez fournir le chemin relatif ou absolu vers le répertoire de l'application qui détient package.json. E. g., si package.json fichier de votre application est situé à /home/user/my_awesome_app/package.json puis dans l'ordre pour démarrer l'application, vous devez exécuter la commande suivante:

    electron /home/user/my_awesome_app

    Également noter que main propriété dans package.json fichier indique le point d'entrée de votre application. Dans votre cas, il doit être comme ceci:

     "main": "src/main.js"
  5. 0

    Le nom de l'application est le nom du dossier qui contient tous les arbres de votre application. Donc, pour l'exécuter, vous devez écrire, dans le cas où votre dossier est nommé d'Électron par exemple;

    électron Électron

    Toujours dans l'invite de commandes dans le chemin que votre dossier se trouve.
    Espérons que cette aide.

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

  6. 0

    Ouvrir votre électrons application, cliquez sur (afficher/toggle outils de développement).