web-dev-qa-db-ja.com

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

Electronアプリケーションを構築していますが、特定のUI要素を調べたいと思います。開発用に開いたChrome devツールがありますが、Google ChromeでできるようにUI要素を右クリックして[要素の検査]を選択できるようにしたいです。現在、右ボイラープレートElectronアプリでは、クリックしても何も起こりません。これを有効にするにはどうすればよいですか？

electron
29
Tanner Semerad

Electronには win.inspectElement（x、y） と呼ばれる組み込み関数があります。

Electron MenuをMenuItemで作成することにより、右クリックのコンテキストメニューにオプションとしてこの関数を含めることができます。クライアント（別名rendererプロセス）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)
51
Tanner Semerad

electron-context-men を試してください。 inspect element、copy、およびpasteを追加します。

6
Oded Breiner