From 9c753c344a2bac62ab9ca3ec587fc6dbd46bd0eb Mon Sep 17 00:00:00 2001 From: "trop[bot]" <37223003+trop[bot]@users.noreply.github.com> Date: Wed, 14 Jan 2026 14:51:07 +0100 Subject: [PATCH] docs: remove stale example and standardize `DevTools` capitalization (#49387) * docs: remove stale example and standardize `DevTools` capitalization Co-authored-by: Erick Zhao * Update docs/api/web-contents.md Co-authored-by: Kilian Valkhof Co-authored-by: Erick Zhao --------- Co-authored-by: trop[bot] <37223003+trop[bot]@users.noreply.github.com> Co-authored-by: Erick Zhao Co-authored-by: Erick Zhao --- docs/api/app.md | 2 +- docs/api/command-line-switches.md | 2 +- docs/api/debugger.md | 2 +- docs/api/extensions-api.md | 4 +- docs/api/native-theme.md | 4 +- docs/api/session.md | 4 +- docs/api/web-contents.md | 76 ++++++------------------------- docs/api/web-frame.md | 2 +- 8 files changed, 25 insertions(+), 71 deletions(-) diff --git a/docs/api/app.md b/docs/api/app.md index e1248d7fbf..fa6c04f0e8 100644 --- a/docs/api/app.md +++ b/docs/api/app.md @@ -611,7 +611,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` diff --git a/docs/api/command-line-switches.md b/docs/api/command-line-switches.md index 725144c1a4..fa37584b6a 100644 --- a/docs/api/command-line-switches.md +++ b/docs/api/command-line-switches.md @@ -313,7 +313,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` diff --git a/docs/api/debugger.md b/docs/api/debugger.md index ddbbfa1d04..c29673f3d4 100644 --- a/docs/api/debugger.md +++ b/docs/api/debugger.md @@ -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' diff --git a/docs/api/extensions-api.md b/docs/api/extensions-api.md index 31999b0526..0e9a3eeda6 100644 --- a/docs/api/extensions-api.md +++ b/docs/api/extensions-api.md @@ -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` - 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 diff --git a/docs/api/native-theme.md b/docs/api/native-theme.md index 7860c87030..c83d772f08 100644 --- a/docs/api/native-theme.md +++ b/docs/api/native-theme.md @@ -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 diff --git a/docs/api/session.md b/docs/api/session.md index 2e6e61b718..26b39a6764 100644 --- a/docs/api/session.md +++ b/docs/api/session.md @@ -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` - 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 diff --git a/docs/api/web-contents.md b/docs/api/web-contents.md index 25fd0991c3..31519a0b92 100644 --- a/docs/api/web-contents.md +++ b/docs/api/web-contents.md @@ -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 `` -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 `` tag: - -```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 `` 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()` diff --git a/docs/api/web-frame.md b/docs/api/web-frame.md index 2681df864a..5ff93495b3 100644 --- a/docs/api/web-frame.md +++ b/docs/api/web-frame.md @@ -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.