DevTools 与页面断开连接，electron

Question

Guys i need to open some web application into my electron app, i used <webview> tag but [official docs][1] of electron offers to use BrowserView .
so i used BrowserView , BUT i got DevTools was disconnected from the page error!
simply i need DevTools for my BrowserView not my entire app. what should i do?

myCode: just main.js

const {app, BrowserView, BrowserWindow} = require('electron');

let win;
let view;
app.on('ready', () => {
    win = new BrowserWindow({width: 800, height: 600});
    win.on('closed', () => {
        win = null
    });
    view = new BrowserView({
        webPreferences: {
            nodeIntegration: false
        }
    });
    win.setBrowserView(view);
    view.setBounds({x: 0, y: 0, width: 800, height: 600});
    view.webContents.loadURL('https://example.com');
    win.openDevTools();
});

Answer 1

openDevTools is basically a function of webContents (when used on BrowserWindow it's only redirected )

So you can open devtools of main window with

win.webContents.openDevTools()

And for the BrowserView with

view.webContents.openDevTools()

Answer 2

This happens when you open DevTools without giving an HTML (or some valid URL) file to the current window.

When you start your application you need to load an HTML file to the window before use toggleDevTools . Solve it by using for example mainWindow.loadUrl('url to an html file or some url') after you build mainWindow using BrowserWindow() . You tried to open DevTools on the win window but it has no URL defined, so it is just an Electron window with anything inside of this.

Answer 3

I faced same issue.. not sure whats the exact error but in my case my model was returning null. I changed that to some value and handled using jquery which resolved my problem.