Comment ajouter un menu contextuel dans Electron qui a l'option "Inspecter l'élément" comme Chrome?
Je crée une application Electron et j'aimerais inspecter des éléments d'interface utilisateur spécifiques. J'ai les outils de développement Chrome Chrome ouverts pour le développement, mais ce que je veux, c'est pouvoir cliquer avec le bouton droit sur un élément d'interface utilisateur et choisir "Inspecter l'élément" comme je le peux dans Google Chrome. Actuellement, à droite -cliquer ne fait rien dans mon application Electron passe-partout. Comment puis-je l'activer?
Electron a une fonction intégrée appelée win.inspectElement (x, y) .
Il est possible d'inclure cette fonction en option dans un menu contextuel du clic droit en créant un Electron Menu avec un MenuItem. Appelez la commande suivante dans le processus de rendu du client (aka ) 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)
Essayez menu contextuel électronique . Il ajoute inspect element, copy et paste.