diff --git a/docs/api/web-contents.md b/docs/api/web-contents.md index 35d8c5833a6c..11ee401978bc 100644 --- a/docs/api/web-contents.md +++ b/docs/api/web-contents.md @@ -1074,6 +1074,67 @@ win.webContents.on('devtools-opened', () => { Removes the specified path from DevTools workspace. +#### `contents.setDevToolsWebContents(devToolsWebContents)` + +* `devToolsWebContents` WebContents + +Uses the `devToolsWebContents` as the target `WebContents` to show devtools. + +The `devToolsWebContents` must not have done any navigation, and it should not +be used for other purposes after the call. + +By default Electron manages the devtools by creating an internal `WebContents` +with native view, which developers have very limited control of. With the +`setDevToolsWebContents` method, developers can use any `WebContents` to show +the devtools in it, including `BrowserWindow`, `BrowserView` and `` +tag. + +An example of showing devtools in a `` tag: + +```html + + + + + + + + + + +``` + +An example of showing devtools in a `BrowserWindow`: + +```js +const {app, BrowserWindow} = require('electron') + +let win = null +let devtools = null + +app.once('ready', () => { + win = new BrowserWindow() + win.loadURL('https://github.com') + win.show() + devtools = new BrowserWindow({show: false}) + devtools.show() + win.webContents.setDevToolsWebContents(devtools.webContents) + win.webContents.openDevTools() +}) +``` + #### `contents.openDevTools([options])` * `options` Object (optional)