Electronの右クリックメニューを追加するには、Chromeのような「要素を検査する」オプションがありますか？

Question

私は電子アプリケーションを構築しており、特定のUI要素を調べたいと思います。私は開発のためにChrome開発ツールを公開していますが、私が望むのは、UI要素を右クリックし、Google Chromeのように「要素を検査」を選択できることです。現在のところ、私のボイラープレート電子アプリでは右クリックは何もしません。どうすればこの機能を有効にできますか？

Answer 1

エレクトロンには、win.inspectElement(x, y)という組み込み関数があります。

MenuItemを持つ電子Menuを作成すると、この機能をオプションとして右クリックのコンテキストメニューに含めることができます。それはinspect element、copyとpasteを追加

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

：

// 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

これを試してみてください：Javascriptがクライアント（別名レンダラプロセス）に次のように呼び出します。