how to open DevTools of <webview>

[miaulightouch]

• Electron version: 4.5.21
• Operating system: Windows 10 64-bit

I follow the exmaple in doc like:

<webview id="foo" src="https://www.github.com/" autosize></webview>

and

const webview = document.getElementById('foo')
webview.addEventListener('dom-ready', () => {
  webview.openDevTools()
})

but it throw a error: Uncaught TypeError: webview.openDevTools is not a function

Am I missing something? or it just didn't be supported anymore?

[miaulightouch]

OK, maybe I got it.

First, there's very BIG different between electron in structure, and docs is not update-to-date, you must find in the source code for a while.

since lots of <webview> method is missing in muon, we must retrieve webContents ID and pass to remote.getWebContents function to get webContents

the way to retrieve webContents ID from <webview> is add event listener on undocumented event did-attach or guest-ready, the tabId key is our webContents ID.

but, remote.getWebContents is not identical to electron's, here's the signature:

remote.getWebContents(tabId, callback)

• tabId Integer - webContents ID
• callback Function
  • webContents Object

if we need to openDevTools at <webview> startup, it should be:

const webview = document.getElementById('foo')
webview.addEventListener('did-attach', event => {
  // remote is located in chrome object
  chrome.remote.getWebContents(event.tabId, webContents => {
    webContents.openDevTools()
  })
})

[bridiver]

I would not recommend using any of the remote apis. We are removing them as quickly as we can remove their usage from Brave. See https://github.com/brave/browser-laptop/blob/master/app/browser/tabs.js#L707 for an example of doing this in the browser process instead of the renderer process. The example is for background pages, but the same thing will work for normal pages