github/electron
1
1
Fork 0
mirror of https://github.com/electron/electron.git synced 2026-02-19 03:14:51 -05:00
Code Issues Packages Projects Releases Wiki Activity

docs: remove stale example and standardize DevTools capitalization (#49321)

Browse Source 
* docs: remove stale example and standardize `DevTools` capitalization

* Update docs/api/web-contents.md

Co-authored-by: Kilian Valkhof <kilian@kilianvalkhof.com>

---------

Co-authored-by: Kilian Valkhof <kilian@kilianvalkhof.com>
This commit is contained in:
Erick Zhao
2026-01-14 01:35:53 -08:00
committed by GitHub
parent a368c5da0c
commit dae76c2885
8 changed files with 25 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/api/app.md
View File

@@ -612,7 +612,7 @@ Returns `string` - The current application directory.
may backup this directory to cloud storage.
* `sessionData` The directory for storing data generated by `Session`, such
as localStorage, cookies, disk cache, downloaded dictionaries, network
state, devtools files. By default this points to `userData`. Chromium may
state, DevTools files. By default this points to `userData`. Chromium may
write very large disk cache here, so if your app does not rely on browser
storage like localStorage or cookies to save user data, it is recommended
to set this directory to other locations to avoid polluting the `userData`

2
docs/api/command-line-switches.md
View File

@@ -317,7 +317,7 @@ By default inspector websocket url is available in stderr and under /json/list e
### `--experimental-network-inspection`
Enable support for devtools network inspector events, for visibility into requests made by the nodejs `http` and `https` modules.
Enable support for DevTools network inspector events, for visibility into requests made by the nodejs `http` and `https` modules.
### `--no-deprecation`

2
docs/api/debugger.md
View File

@@ -44,7 +44,7 @@ Returns:
* `reason` string - Reason for detaching debugger.
Emitted when the debugging session is terminated. This happens either when
`webContents` is closed or devtools is invoked for the attached `webContents`.
`webContents` is closed or DevTools is invoked for the attached `webContents`.
#### Event: 'message'

4
docs/api/extensions-api.md
View File

@@ -57,7 +57,7 @@ The following methods are available on instances of `Extensions`:
* `options` Object (optional)
* `allowFileAccess` boolean - Whether to allow the extension to read local files over `file://`
protocol and inject content scripts into `file://` pages. This is required e.g. for loading
devtools extensions on `file://` URLs. Defaults to false.
DevTools extensions on `file://` URLs. Defaults to false.
Returns `Promise<Extension>` - resolves when the extension is loaded.
@@ -83,7 +83,7 @@ const path = require('node:path')
app.whenReady().then(async () => {
await session.defaultSession.extensions.loadExtension(
path.join(__dirname, 'react-devtools'),
// allowFileAccess is required to load the devtools extension on file:// URLs.
// allowFileAccess is required to load the DevTools extension on file:// URLs.
{ allowFileAccess: true }
)
// Note that in order to use the React DevTools extension, you'll need to

4
docs/api/native-theme.md
View File

@@ -36,7 +36,7 @@ everything will be reset to the OS default. By default `themeSource` is `system
Settings this property to `dark` will have the following effects:
* `nativeTheme.shouldUseDarkColors` will be `true` when accessed
* Any UI Electron renders on Linux and Windows including context menus, devtools, etc. will use the dark UI.
* Any UI Electron renders on Linux and Windows including context menus, DevTools, etc. will use the dark UI.
* Any UI the OS renders on macOS including menus, window frames, etc. will use the dark UI.
* The [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) CSS query will match `dark` mode.
* The `updated` event will be emitted
@@ -44,7 +44,7 @@ Settings this property to `dark` will have the following effects:
Settings this property to `light` will have the following effects:
* `nativeTheme.shouldUseDarkColors` will be `false` when accessed
* Any UI Electron renders on Linux and Windows including context menus, devtools, etc. will use the light UI.
* Any UI Electron renders on Linux and Windows including context menus, DevTools, etc. will use the light UI.
* Any UI the OS renders on macOS including menus, window frames, etc. will use the light UI.
* The [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) CSS query will match `light` mode.
* The `updated` event will be emitted

4
docs/api/session.md
View File

@@ -1512,7 +1512,7 @@ will not work on non-persistent (in-memory) sessions.
* `options` Object (optional)
* `allowFileAccess` boolean - Whether to allow the extension to read local files over `file://`
protocol and inject content scripts into `file://` pages. This is required e.g. for loading
devtools extensions on `file://` URLs. Defaults to false.
DevTools extensions on `file://` URLs. Defaults to false.
Returns `Promise<Extension>` - resolves when the extension is loaded.
@@ -1538,7 +1538,7 @@ const path = require('node:path')
app.whenReady().then(async () => {
await session.defaultSession.loadExtension(
path.join(__dirname, 'react-devtools'),
// allowFileAccess is required to load the devtools extension on file:// URLs.
// allowFileAccess is required to load the DevTools extension on file:// URLs.
{ allowFileAccess: true }
)
// Note that in order to use the React DevTools extension, you'll need to

76
docs/api/web-contents.md
View File

@@ -62,7 +62,7 @@ console.log(webContents)
### `webContents.getAllWebContents()`
Returns `WebContents[]` - An array of all `WebContents` instances. This will contain web contents
for all windows, webviews, opened devtools, and devtools extension background pages.
for all windows, webviews, opened DevTools, and DevTools extension background pages.
### `webContents.getFocusedWebContents()`
@@ -958,7 +958,7 @@ win.loadURL('https://github.com')
#### Event: 'devtools-reload-page'
Emitted when the devtools window instructs the webContents to reload
Emitted when the DevTools window instructs the webContents to reload
#### Event: 'will-attach-webview'
@@ -1865,66 +1865,20 @@ Removes the specified path from DevTools workspace.
* `devToolsWebContents` WebContents
Uses the `devToolsWebContents` as the target `WebContents` to show devtools.
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`
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 `<webview>`
tag.
the DevTools in it, such as [`BrowserWindow`](./browser-window.md) or [`WebContentsView`](./web-contents-view.md).
Note that closing the devtools does not destroy the `devToolsWebContents`, it
is caller's responsibility to destroy `devToolsWebContents`.
Note that closing the DevTools does not destroy the `devToolsWebContents`, it
is the caller's responsibility to destroy `devToolsWebContents` manually.
An example of showing devtools in a `<webview>` tag:
```html
<html>
<head>
<style type="text/css">
* { margin: 0; }
#browser { height: 70%; }
#devtools { height: 30%; }
</style>
</head>
<body>
<webview id="browser" src="https://github.com"></webview>
<webview id="devtools" src="about:blank"></webview>
<script>
const { ipcRenderer } = require('electron')
const emittedOnce = (element, eventName) => new Promise(resolve => {
element.addEventListener(eventName, event => resolve(event), { once: true })
})
const browserView = document.getElementById('browser')
const devtoolsView = document.getElementById('devtools')
const browserReady = emittedOnce(browserView, 'dom-ready')
const devtoolsReady = emittedOnce(devtoolsView, 'dom-ready')
Promise.all([browserReady, devtoolsReady]).then(() => {
const targetId = browserView.getWebContentsId()
const devtoolsId = devtoolsView.getWebContentsId()
ipcRenderer.send('open-devtools', targetId, devtoolsId)
})
</script>
</body>
</html>
```
```js
// Main process
const { ipcMain, webContents } = require('electron')
ipcMain.on('open-devtools', (event, targetContentsId, devtoolsContentsId) => {
const target = webContents.fromId(targetContentsId)
const devtools = webContents.fromId(devtoolsContentsId)
target.setDevToolsWebContents(devtools)
target.openDevTools()
})
```
An example of showing devtools in a `BrowserWindow`:
An example of showing DevTools in a `BrowserWindow`:
```js title='main.js'
const { app, BrowserWindow } = require('electron')
@@ -1944,31 +1898,31 @@ app.whenReady().then(() => {
#### `contents.openDevTools([options])`
* `options` Object (optional)
* `mode` string - Opens the devtools with specified dock state, can be
* `mode` string - Opens the DevTools with specified dock state, can be
`left`, `right`, `bottom`, `undocked`, `detach`. Defaults to last used dock state.
In `undocked` mode it's possible to dock back. In `detach` mode it's not.
* `activate` boolean (optional) - Whether to bring the opened devtools window
* `activate` boolean (optional) - Whether to bring the opened DevTools window
to the foreground. The default is `true`.
* `title` string (optional) - A title for the DevTools window (only in `undocked` or `detach` mode).
Opens the devtools.
Opens the DevTools.
When `contents` is a `<webview>` tag, the `mode` would be `detach` by default,
explicitly passing an empty `mode` can force using last used dock state.
On Windows, if Windows Control Overlay is enabled, Devtools will be opened with `mode: 'detach'`.
On Windows, if Windows Control Overlay is enabled, DevTools will be opened with `mode: 'detach'`.
#### `contents.closeDevTools()`
Closes the devtools.
Closes the DevTools view.
#### `contents.isDevToolsOpened()`
Returns `boolean` - Whether the devtools is opened.
Returns `boolean` - Whether the DevTools view is opened.
#### `contents.isDevToolsFocused()`
Returns `boolean` - Whether the devtools view is focused .
Returns `boolean` - Whether the DevTools view is focused .
#### `contents.getDevToolsTitle()`

2
docs/api/web-frame.md
View File

@@ -197,7 +197,7 @@ dispatch errors of isolated worlds to foreign worlds.
* `info` Object
* `securityOrigin` string (optional) - Security origin for the isolated world.
* `csp` string (optional) - Content Security Policy for the isolated world.
* `name` string (optional) - Name for isolated world. Useful in devtools.
* `name` string (optional) - Name for isolated world. Useful in DevTools.
Set the security origin, content security policy and name of the isolated world.