Come aggiungere un menu di scelta rapida in Electron con l'opzione "Ispeziona elemento" come Chrome?

Question

Sto costruendo un'applicazione Electron e vorrei esaminare specifici elementi dell'interfaccia utente. Ho gli strumenti di sviluppo di Chrome aperti per lo sviluppo, ma quello che voglio è poter fare clic con il pulsante destro del mouse su un elemento dell'interfaccia utente e scegliere "Ispeziona elemento" come faccio in Google Chrome. Attualmente, facendo clic con il pulsante destro del mouse, non viene eseguito alcunché nella mia app Electron. Come posso abilitare questo?

Answer 1

L'elettrone ha una funzione incorporata denominata win.inspectElement(x, y).

Includendo questa funzione come opzione in un menu di scelta rapida con clic con il pulsante destro del mouse, è possibile creare un Electron Menu con un MenuItem. Chiamare il seguente nel client (aka renderer processo) Javascript:

// Importing this adds a right-click menu with 'Inspect Element' option 
const remote = require('remote') 
const Menu = remote.require('menu') 
const MenuItem = remote.require('menu-item') 

let rightClickPosition = null 

const menu = new Menu() 
const menuItem = new MenuItem({ 
    label: 'Inspect Element', 
    click:() => { 
    remote.getCurrentWindow().inspectElement(rightClickPosition.x, rightClickPosition.y) 
    } 
}) 
menu.append(menuItem) 

window.addEventListener('contextmenu', (e) => { 
    e.preventDefault() 
    rightClickPosition = {x: e.x, y: e.y} 
    menu.popup(remote.getCurrentWindow()) 
}, false) 

Answer 2

Prova questa:

https://www.npmjs.com/package/electron-context-menu

Aggiunge inspect element, copy e paste.