--inspect-brk-node Node.js flag
The --inspect-brk-node[=[host:]port] flag activates inspector on host:port and breaks at the start of the first internal JavaScript script executed when the inspector is available. Default host:port is 127.0.0.1:9229.
webcontents: devtools & debugging
18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
--inspect-port Node.js flag
The --inspect-port=[host:]port flag sets the host:port to be used when the inspector is activated. This is useful when activating the inspector by sending the SIGUSR1 signal. Default host is 127.0.0.1. It is aliased to --debug-port=[host:]port.
--inspect Node.js flag for debugging
The --inspect[=[host:]port] flag activates inspector on host:port. Default is 127.0.0.1:9229. V8 inspector integration allows tools such as Chrome DevTools and IDEs to debug and profile Electron instances. Tools attach to Electron instances via TCP port and communicate using the Chrome DevTools Protocol. It is aliased to --debug[=[host:]port. See Debugging the Main Process guide for more details.
--inspect-publish-uid Node.js flag
The --inspect-publish-uid=stderr,http flag specifies ways of inspector web socket URL exposure. By default inspector websocket URL is available in stderr and under /json/list endpoint on http://host:port/json/list.
--experimental-network-inspection Node.js flag
The --experimental-network-inspection flag enables support for DevTools network inspector events, for visibility into requests made by the nodejs http and https modules.
--experimental-inspector-network-resource Node.js flag
The --experimental-inspector-network-resource flag enables support for resolving source maps over the network when using the Node.js inspector. When enabled, DevTools can retrieve remote source maps for main and utility process scripts via the Node.js inspector. Be mindful that the Node.js inspector will make network requests to URLs specified in source maps, especially in environments where the process has access to internal networks.
WebPreferences devTools property
The `devTools` boolean property determines whether to enable DevTools. If set to `false`, `BrowserWindow.webContents.openDevTools()` cannot be used to open DevTools. Default is `true`.
Official Electron symbol server URL
The official symbol server URL for Electron is https://symbols.electronjs.org. This URL cannot be visited directly in a browser; it must be added to the symbol path of a debugging tool.
Windbg symbol path configuration for Electron
To use only the Electron symbol server in Windbg, add the entry SRV*c:\code\symbols\*https://symbols.electronjs.org to your symbol path, where c:\code\symbols is a local cache directory. Replace this with any writable directory on your computer if you prefer a different location for downloaded symbols.
Windbg symbol path with both Microsoft and Electron servers
To get symbols from both Microsoft's symbol server and Electron's symbol server in Windbg, use: SRV*c:\code\symbols\*https://msdl.microsoft.com/download/symbols;SRV*c:\code\symbols\*https://symbols.electronjs.org. List Microsoft's server first.
Setting Windbg symbol path via _NT_SYMBOL_PATH environment variable or .sympath command
In Windbg, set the symbol path string as the _NT_SYMBOL_PATH environment variable, through the Windbg menus, or by typing the .sympath command.
Troubleshooting Windbg symbol loading issues
To debug why symbols are not loading in Windbg, type the commands: !sym noisy followed by .reload /f electron.exe. This will print diagnostic information about symbol loading.
Debugging released Electron builds is difficult due to optimization
Released Electron builds are heavily optimized, which makes debugging difficult. The debugger may not be able to show the content of all variables, and execution paths can appear strange due to inlining, tail calls, and other compiler optimizations. The only workaround is to build an unoptimized local build.
Generate Xcode project for debugging with gn gen
Run 'gn gen out/Testing --ide=xcode' to generate an Xcode project for debugging Electron sources. This creates electron.ninja.xcworkspace which must be opened to set breakpoints and inspect code.
Attach debugger to Electron process in Xcode
After building, launch the Electron app, then open the generated Xcode workspace and attach to the Electron process through Debug > Attach To Process > Electron menu. To debug the renderer process, attach to Electron Helper as well.
Setting breakpoints in indexed files versus Chromium source
Breakpoints can be set directly in any indexed files through Xcode. However, breakpoints cannot be set directly in Chromium source code. To set breakpoints in Chromium source, use Debug > Breakpoints > Create Symbolic Breakpoint and enter a function name as the symbol. This will set the breakpoint for all functions with that name across all classes. Symbolic breakpoints can be created before attaching the debugger, but they may not display until the debugger is attached to the app.
webview DevTools methods
openDevTools() opens DevTools window for guest page. closeDevTools() closes DevTools window. isDevToolsOpened() returns whether DevTools window is attached. isDevToolsFocused() returns whether DevTools window is focused. inspectElement(x, y) starts inspecting element at position (x, y). inspectSharedWorker() opens DevTools for shared worker context. inspectServiceWorker() opens DevTools for service worker context.
webview DevTools events
devtools-open-url event emits when link clicked in DevTools or 'Open in new tab' selected (returns url). devtools-search-query event emits when 'Search' selected for text (returns event and query string). devtools-opened event emits when DevTools opened. devtools-closed event emits when DevTools closed. devtools-focused event emits when DevTools focused or opened.