Come includere Chrome DevTools in Electron?

Question

Sono ancora nuovo in Electron che attualmente sto seguendo here.

Ho letto questo page su come includere lo Chrome DevTools in modo che possa eseguire facilmente il debug dell'applicazione. Ho seguito la documentazione ma una volta che esegue il comando electron <app-name> restituisce un errore: The app provided is not a valid electron app, please read the docs on how to write one...

Ecco il blocco di codice dal mio main.js lima:

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

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

Questo è come la mia struttura del progetto si presenta come:

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

Qualsiasi aiuto sarebbe molto apprezzato. Grazie!

Answer 1

Molto probabilmente, Electron non è in grado di capire il percorso della cartella dell'applicazione che hai fornito. È necessario fornire il percorso relativo o assoluto alla directory dell'applicazione che contiene package.json in esso. Per esempio, se il file package.json della vostra applicazione si trova a /home/user/my_awesome_app/package.json poi, al fine di avviare l'applicazione è necessario eseguire il seguente comando:

electron /home/user/my_awesome_app 

Si noti inoltre che main proprietà in package.json file indica il punto di ingresso per l'applicazione. Nel tuo caso deve essere in questo modo:

"main": "src/main.js" 

Answer 2

Il nome del aplication è il nome della cartella che contiene tutto l'albero della vostra aplication. Quindi per eseguire devi scrivere, nel caso in cui la tua cartella si chiami Electron per esempio;

elettrone Electron

sempre in pronta nel percorso che la cartella si trova. Spero che questo aiuto.

(Ci scusiamo per il mio inglese, po 'arrugginito forse)

Answer 3

Così, dopo aver richiesto il seguente:

var app = require('app'); 

È possibile utilizzare il seguente codice (lo uso nel mio app):

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

accedendo al seguente indirizzo mi permette di eseguire il debug dell'applicazione in Chrome:

http://127.0.0.1:8315 

Spero che questo ti aiuti. Sono anche nuovo di Electron!

Se è anche necessario eseguire alcune configurazioni sul motore del browser sottostante, fare riferimento a the docs.

Answer 4

Forse sto fraintendendo, ma puoi semplicemente fare CTRL + MAIUSC + I per visualizzare gli strumenti di sviluppo.

In alternativa, se si desidera eseguirlo a livello di codice, il modo in cui lo faccio è includere le seguenti righe nel mio file main.js che viene passato a electron.

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

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

credo che parte del problema potrebbe essere che non è in attesa per l'applicazione sia pronta prima di provare a fare cose con esso.

Answer 5

è possibile aprire strumento dev come questo:

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 6

Aprite la vostra applicazione di elettroni, fare clic su (vista/commutazione strumenti di sviluppo).