Atom Electron – Rileva gli strumenti di sviluppo pronti

Questo problema riguarda le app basate su Chromium / Node.js ( Atom Electron , Node Webkit , ecc.) E non le app basate su browser Chrome.

Durante il debug del codice di avvio di un programma che utilizza Chromium e Node.js, vi è un ritardo significativo tra il momento in cui Dev Tools viene richiamato e in realtà viene avviato completamente, inclusa la possibilità di eseguire punti di interruzione. Ciò significa che per eseguire il debug della logica di avvio di un’app, che si verifica immediatamente dopo l’triggerszione di Dev Tools, i punti di interruzione inseriti o archiviati non vengono triggersti ​​per questo codice di avvio.

L’unica soluzione che ho trovato è di aggiungere un timeout ad hoc utilizzando setTimeout(continueBootLogic(), ) per posticipare l’avvio della mia logica di avvio per un fino a quando non presumo che Dev Tools sia completamente caricato.

C’è un evento esistente in Electron MainWindow.on('devtools-opened', function() {...}) triggers quando gli strumenti dev si aprono ma prima che il motore del punto di interruzione sia avviato. L’utilizzo di questo evento mi avvicina al momento attuale, ma ho ancora bisogno di un timeout scadente per aspettare un po ‘di più.

Qualcuno ha trovato un modo per rilevare in modo preciso ed elegante quando gli strumenti di sviluppo sono pronti per avviare il rilevamento e l’esecuzione di punti di interruzione nel codice?

Avere questo sarebbe di grande aiuto nel tentativo di eseguire il debug del codice di avvio in Electron e nw.js in modo da poter trascorrere più tempo a giocare con le nuove API.

Ecco un esempio di programma Electron:

package.json:

 { "name" : "DevToolsWait", "version" : "0.2.0", "main" : "main.js" } 

main.js:

 'use strict' const electron = require('electron') console.log('Electron version: '+process.versions['electron']) electron.app.on('ready', ()=>{ var bw = new electron.BrowserWindow({width: 800, height: 600}); // Load renderer.html bw.loadURL('file://' + __dirname + '/renderer.html'); // Open the devtools. bw.webContents.openDevTools(); // Handle devtools opened event bw.webContents.on('devtools-opened', ()=>{ console.log("devtools-opened event called!") setImmediate(()=>{ console.log("dev tools is now open (not sure if breakpoints work yet)!") // Send IPC call to main process that devtools is open bw.webContents.send('devtools-opened'); }); }); }); 

index.html:

    DevToolsWait Test!    // Set this to 0 to get no timeout. 100ms seems to work on Linux with 1.2.1 // Had to set as long as 1000ms to get it to work with older versions const iWaitTimeout = 100 const electron = require('electron'); // listen for Dev Tools opening event // Still have to wait a bit for break point engine to run electron.ipcRenderer.on('devtools-opened', function(){ console.log('devtools-opened ipc called') // Start main logic if(iWaitTimeout==0){ console.log('booting without timeout') bootGUI() } else { console.log('booting with timeout') setTimeout(bootGUI, 100) } }); // Renderer process bootstrap logic function bootGUI(){ console.log('bootGUI called') // Inserting ad-hoc debugger call. This should fire no matter what debugger; // ... doing other stuff if(iWaitTimeout===0){ window.document.body.innerHTML+="If you see this message before debugger command line stops the code in the DevTools, then it failed. DevTools loaded event fired before the debugger is ready to handle breakpoints :(

Otherwise, woohoo!" } else { window.document.body.innerHTML+="If you see this message before debugger breaks, Then the timeout test failed. Maybe you should tweak the timeout to be a little longer to allow dev tools debugger time to warm up. see line with setTimeout(...) in renderer.html" } }

Metti tutti i file nella stessa cartella e per correre, avere l’elettrone installato ed eseguire l’ electron . nella stessa cartella di package.json.

Per modificare i test, iWaitTimeout in renderer.html.

Il mio lavoro attorno alla logica imposta il timeout a 100 millisecondi. Questo può essere spremuto sul mio sistema ma è probabile che dipenda dal computer e dal carico. Soluzione piuttosto disordinata IMO.

Sarebbe fantastico avere un evento come devtools-breakpoint-ready o qualcosa di simile. La logica sopra può essere probabilmente ottimizzata un po ‘. Ho appena iniziato a usare Electron ieri sera. Lo stesso problema è con Node Webkit.

puoi rilevare quando lo strumento dev viene aperto usando 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(); }); });