Should we trigger the destruction of external_web_contents when managed_web_contents is destroyed, so that it follows the default devtools behavior which closes when the inspected window is destroyed.

I guess this also enabled inspecting devtools window #2835 , LGTM 👍

Should we trigger the destruction of external_web_contents when managed_web_contents is destroyed, so that it follows the default devtools behavior which closes when the inspected window is destroyed.

The external_web_contents is usually managed by some wrapper classes like BrowserWindow or <webview>, having external_web_contents destroyed would leave the wrappers in a corrupted state. I think it is fine to have developers handle the lifetime of devtools, I'll make it clear in the docs.

When is it available on npm ?

@LeoMartinDev It will be in next minor/major release, which can take some time since the master branch is not very stable yet.

@zcbenz @MarshallOfSound
I develop a tool with electron. There are two webview components in the app. One shows the html page, another one shows the chrome devtools which debug the page. The current solution is:

const browserContents = browserView.getWebContents() // browserView--a simulator
const devtoolsContents = devtoolsView.getWebContents() //devtoolsView -- a devtools

browserContents.setDevToolsWebContents(devtoolsContents)
browserContents.openDevTools({
     detach: true
})

browserContents.debugger.attach();
browserContents.debugger.sendCommand(    // not work
          'Emulation.setTouchEmulationEnabled', 
  {
    enabled: true,
    configuration: 'mobile',
  }, function(err){
     if(err){console.log("Emulation err:", err);}
  }
);

The code above can solve the problem, but the browserContents.debugger.sendCommand does not work. So, I want to ask if there are any good ideas about how to solve this question?( I want the browserView support touch events by using browserContents.debugger.sendCommand api)

I also encounter the same question, looking for @MarshallOfSound your help.

As I know, from chrome 63, the chrome support multiple debugger for one target, So, When we can update to support chrome 63?

https://developers.google.com/web/updates/2017/10/devtools-release-notes

The only work around I can think of, is to execute the command in Devtools WebContents with executeJavaScript directly:

devtoolsContents.executeJavaScript('...')

But you have to figure out which devtools JavaScript API to use.

I don't know much about the multiple debugger support of devtools, so I'm not sure if it can solve this problem.

thanks a lot , i have solve the problem.

thanks a lot , i have solve the problem.
I have the same question, how did you solved it?

Just create a websocket server between chrome devtools and debugger server, then you can send any cmd you want;

@jacklovepdf
can u describe how to solve the problem much more detailed？

thanks @jacklovepdf, I have solve the problem with electron3
1.on the main process, add this code: app.commandLine.appendSwitch('remote-debugging-port', '8400');
2.<webview id="browserView" src="about:blank" webPreferences="scrollBounce=1,enableBlinkFeatures=OverlayScrollbars" plugins></webview>
3.when the browserWebview ready:

browserView.addEventListener('dom-ready', () => {
  if (isBrowserWebviewReady) return
  isBrowserWebviewReady = true
  fetch('http://127.0.0.1:8400/json')
    .then(res => res.json())
    .then(res => {
      const target = res.find(child => child.type === 'webview' && child.url === 'about:blank')
      if (target) {
        devtoolsView.setAttribute('src', `http://127.0.0.1:8400${target.devtoolsFrontendUrl}`)
        const ws = new WebSocket(target.webSocketDebuggerUrl)
        ws.onopen = () => {
          ws.send(JSON.stringify({
            id: 1,
            method: 'Emulation.setEmitTouchEventsForMouse',
            params: {
              enabled: true,
              configuration: 'mobile'
            }
          }))
        }
        devtoolsView.addEventListener('dom-ready', () => {
          browserView.setAttribute('src', 'http://xxxx.com')
        })
      }
    })
})

Hi,
there is a problem with contents.setDevToolsWebContents(devToolsWebContents) and the example screenshot above. The dev tools pane is not resizable like the default devtools allows. Any way to fix this?

thanks @jacklovepdf and @xyytech，I have solve the some problem。

main.js:

app.commandLine.appendSwitch('remote-debugging-port', '8090');

renderer.js:

const baseUrl = 'http://127.0.0.1:8090';
const simulatorView = document.getElementById('simulator');
const devtoolsView = document.getElementById('devtools');
simulatorView.addEventListener('dom-ready', () => {
  fetch(`${baseUrl}/json`)
    .then(res => res.json())
    .then(res => {
      const target = res.find(child => child.type === 'webview' && child.url === simulatorView.src);
      if (target) {
      devtoolsView.setAttribute('src', `${baseUrl}${target.devtoolsFrontendUrl}`);
      const simulatorContents = simulatorView.getWebContents();
      const devtoolsContents = devtoolsView.getWebContents();
      simulatorContents.setDevToolsWebContents(devtoolsContents);
      simulatorContents.debugger.attach();
      simulatorContents.openDevTools({
        mode: 'detach'
      });
    }
  });
});

thanks @jacklovepdf and @xyytech，I have solve the some problem。

main.js:

app.commandLine.appendSwitch('remote-debugging-port', '8090');

renderer.js:

const baseUrl = 'http://127.0.0.1:8090';
const simulatorView = document.getElementById('simulator');
const devtoolsView = document.getElementById('devtools');
simulatorView.addEventListener('dom-ready', () => {
  fetch(`${baseUrl}/json`)
    .then(res => res.json())
    .then(res => {
      const target = res.find(child => child.type === 'webview' && child.url === simulatorView.src);
      if (target) {
      devtoolsView.setAttribute('src', `${baseUrl}${target.devtoolsFrontendUrl}`);
      const simulatorContents = simulatorView.getWebContents();
      const devtoolsContents = devtoolsView.getWebContents();
      simulatorContents.setDevToolsWebContents(devtoolsContents);
      simulatorContents.debugger.attach();
      simulatorContents.openDevTools({
        mode: 'detach'
      });
    }
  });
});

Has anyone tried this solution successfully?