39 lines
1.5 KiB
Markdown
39 lines
1.5 KiB
Markdown
|
# Application Debugging
|
||
|
|
|
||
|
|
Whenever your Electron application is not behaving the way you wanted it to,
|
||
|
|
an array of debugging tools might help you find coding errors, performance
|
||
|
|
bottlenecks, or optimization opportunities.
|
||
|
|
|
||
|
|
## Renderer Process
|
||
|
|
|
||
|
|
The most comprehensive tool to debug individual renderer processes are the
|
||
|
|
Chromium Developer Tools. They are available for all renderer processes,
|
||
|
|
including instances of `BrowserWindow`, `BrowserView`, and `WebView`. You
|
||
|
|
can open them programmatically by calling the `openDevTools()` API on the
|
||
|
|
`webContents` of the instance:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
const { BrowserWindow } = require('electron')
|
||
|
|
|
||
|
|
let win = new BrowserWindow()
|
||
|
|
win.webContents.openDevTools()
|
||
|
|
```
|
||
|
|
|
||
|
|
Google offers [excellent documentation for their developer tools][devtools].
|
||
|
|
We recommend that you make yourself familiar with them - they are usually one
|
||
|
|
of the most powerful utilities in any Electron Developer's tool belt.
|
||
|
|
|
||
|
|
## Main Process
|
||
|
|
|
||
|
|
Debugging the main process is a bit trickier, since you cannot simply open
|
||
|
|
developer tools for them. The Chromium Developer Tools can [be used
|
||
|
|
to debug Electron's main process][node-inspect] thanks to a closer collaboration
|
||
|
|
between Google / Chrome and Node.js, but you might encounter oddities like
|
||
|
|
`require` not being present in the console.
|
||
|
|
|
||
|
|
For more information, see the [Debugging the Main Process documentation][main-debug].
|
||
|
|
|
||
|
|
[node-inspect]: https://nodejs.org/en/docs/inspector/
|
||
|
|
[devtools]: https://developer.chrome.com/devtools
|
||
|
|
[main-debug]: ./debugging-main-process.md
|